import React from "react";
import Logo from "../Logo/Logo.tsx";
import Account from "../Account/Account.tsx";
import styles from './Header.module.css';
import {Link, useLocation, useNavigate} from "react-router-dom";

const Header: React.FC = () => {
    const location = useLocation();
    const navigate = useNavigate();
    const isCreateSurveyActive = location.pathname.includes('/survey/create');
    const isSurveyPage = location.pathname.includes('/survey/') && !location.pathname.includes('/survey/create');
    const isMySurveysPage = location.pathname === '/my-surveys' || isSurveyPage;

    const handleLogoClick = () => {
        navigate(location.pathname, { replace: true });
    };

    return (
        <div className={styles.header}>
            <Logo href={location.pathname} onClick={handleLogoClick} />
            <nav className={styles.pagesNav}>
                <Link to='/survey/create/questions'
                      className={`${styles.pageLink} ${isCreateSurveyActive ? styles.active : ''}`}>
                    Создать опрос
                    {isCreateSurveyActive && <hr className={styles.activeLine}/>}
                </Link>
                <Link to='/my-surveys'
                      className={`${styles.pageLink} ${isMySurveysPage ? styles.active : ''}`}>
                    Мои опросы
                    {isMySurveysPage && <hr className={styles.activeLine}/>}
                </Link>
            </nav>
            <Account href={'/profile'} />
        </div>
    );
};

export default Header;