import { useNavigate } from "react-router-dom";
import styles from "./styles.module.scss";
import BackButton from "@/components/pages/ABDesign/v1/ui/BackButton";
import Title from "@/components/Title";
import Burger from "../../ui/Burger";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";

interface IHeaderProps {
  isBackButtonVisible?: boolean;
  isBurgerVisible?: boolean;
  isLogoVisible?: boolean;
  className?: string;
  classNameTitle?: string;
  onBack?: () => void;
  onBurger?: () => void;
}

function Header({
  classNameTitle = "",
  isBackButtonVisible = true,
  isBurgerVisible = true,
  isLogoVisible = true,
  onBurger,
  onBack,
}: IHeaderProps) {
  const { translate } = useTranslations(ELocalesPlacement.Chats);
  const navigate = useNavigate();
  const handleBack = onBack ? onBack : () => navigate(-1);

  return (
    <header className={styles.header}>
      {isBackButtonVisible && (
        <BackButton
          className={styles["back-button"]}
          fillColor="#F2F3FD"
          onClick={handleBack}
        />
      )}
      {isLogoVisible && (
        <Title className={`${styles.title} ${classNameTitle}`} variant="h2">
          {translate("aura")}
        </Title>
      )}
      {isBurgerVisible && (
        <Burger onClick={onBurger} className={styles.burger} />
      )}
    </header>
  );
}

export default Header;
