import Link from "next/link";
import Image from "next/image";
import { logoConfig } from "./headerConfig";
import { useLocaleDirection } from "@/hooks/useLocale";

interface LogoProps {
  onClick?: () => void;
  isScrolled?: boolean;
}

export default function Logo({ onClick, isScrolled = false }: LogoProps) {
  const { locale } = useLocaleDirection();
  return (
    <Link href={`/${locale}`} onClick={onClick}>
      <Image
        src={logoConfig.src}
        alt={logoConfig.alt}
        width={logoConfig.width | 150}
        height={logoConfig.height | 48}
        className={`object-contain aspect-[150/48] transition-all duration-300  ${
          isScrolled ? "w-[75px] md:w-[100px]" : "w-[100px] md:w-[150px]"
        }`}
        priority
      />
    </Link>
  );
}