import { FC } from 'react';
import { useContext, useEffect } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { ApiContext } from "../contexts/api";
import { useApi } from "../hooks/useApi";

type Props = {
    title: string;
    showFriends?: boolean;
    showSpotify?: boolean;
    showProfile?: boolean;
};

export const Header: FC<Props> = ({ title, showFriends, showSpotify, showProfile }) => {
    const navigate = useNavigate();
    return (
        <header>
            <h1><a onClick={() => {navigate('../home/', { replace: true })}}>{title}</a></h1>
            <nav>
                <ul>
                    {/*<li><a href="/home">Feed</a></li>*/}
                    {showFriends && <li><a onClick={() => {navigate('../friends/', { replace: true })}}>Friends</a></li>}
                    {showProfile && <li><a onClick={() => {navigate('../profile/', { replace: true })}}>Profile</a></li>}
                    {showSpotify && <li><a onClick={() => {navigate('../spotify/', { replace: true })}}>Connect Spotify</a></li>}
                </ul>
            </nav>
        </header>
    );
};