import styles from "./styles.module.css";
import Title from "@/components/Title";
import { useNavigate } from "react-router-dom";
import BackButton from "../../ui/BackButton";

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

function Header({
  className = "",
  classNameTitle = "",
  isBackButtonVisible = true,
  arrowColor = "#353E75",
  onBack,
}: IHeaderProps) {
  const navigate = useNavigate();
  const handleBack = onBack ? onBack : () => navigate(-1);
  return (
    <div className={`${styles.container} ${className}`}>
      {!isBackButtonVisible && <div />}
      {isBackButtonVisible && <BackButton fillColor={arrowColor} onClick={handleBack} />}
      <Title className={`${styles.title} ${classNameTitle}`} variant="h2">
        AURA
      </Title>
    </div>
  );
}

export default Header;
