"use client";

import Image from "next/image";
import { Link } from "@/i18n/navigation";
import { useLocale } from "use-intl";
import { useTranslations } from "next-intl";
import { useVendor } from "@/context/VendorContext";

export default function Logo() {
  const locale = useLocale();
  const t = useTranslations("Header");
  const { vendor } = useVendor();

  // Use vendor image if available, otherwise fallback to default logos
  const logoSrc = vendor?.image
    ? vendor.image
    : locale === "ar"
    ? "/images/logo-ar.svg"
    : "/images/logo-en.svg";

  return (
    <Link href="/" className="mt-1">
      <Image
        src={logoSrc}
        alt={vendor?.name || t("logoAlt")}
        width={150}
        height={150}
        className="w-16 h-15 sm:w-20 sm:h-18 md:w-25 md:h-23 object-contain"
        unoptimized={vendor?.image ? true : false}
      />
    </Link>
  );
}