import Link from "next/link";
import Image from "next/image";
import { useHome } from "@/context/helpers/Home/HomeContext";

export default function NavbarLogo() {
  const { companyData } = useHome();

  // Don't render if no logo data available
  if (!companyData?.logo) {
    return (
      <Link href="/" className="w-[120px] h-[40px] bg-gray-200 animate-pulse rounded" />
    );
  }

  return (
    <Link href="/" className="">
      <Image
        src={companyData.logo}
        alt={`${companyData?.name || "Store"} logo`}
        width={120}
        height={75}
        loading="lazy"
        className="w-[120px] h-[75px] object-contain"
      />
    </Link>
  );
}