"use client";

import Image from "next/image";
import { urlFor } from "@/sanity/lib/image";
import { SETTINGS_QUERY_RESULT } from "@/sanity.types";

export default function Logo({
  settings,
}: {
  settings: SETTINGS_QUERY_RESULT;
}) {
  // Brand is permanently light mode, default to light logo then dark logo fallback
  const logoToUse = settings?.logo?.light || settings?.logo?.dark;

  return logoToUse ? (
    <Image
      src={urlFor(logoToUse).url()}
      alt={settings?.siteName || "Vietnam Wedding Guide"}
      width={
        (settings?.logo?.width as number) ??
        logoToUse?.asset?.metadata?.dimensions?.width ??
        180
      }
      height={
        (settings?.logo?.height as number) ??
        logoToUse?.asset?.metadata?.dimensions?.height ??
        48
      }
      title={settings?.siteName || "Vietnam Wedding Guide"}
      placeholder={
        logoToUse?.asset?.metadata?.lqip &&
        logoToUse?.asset?.mimeType !== "image/svg+xml"
          ? "blur"
          : undefined
      }
      blurDataURL={logoToUse?.asset?.metadata?.lqip || undefined}
      quality={100}
      priority
      className="h-10 w-auto object-contain"
    />
  ) : (
    <div className="flex items-center gap-2.5 sm:gap-3">
      <Image
        src="/vwg-logo-web-3.webp"
        alt={settings?.siteName || "Vietnam Wedding Guide"}
        width={180}
        height={48}
        priority
        unoptimized
        className="h-9 sm:h-10 w-auto object-contain shrink-0"
        style={{ width: "auto" }}
      />
      <span className="font-title text-sm sm:text-lg font-bold tracking-tight gold-gradient-text truncate max-w-[190px] min-[400px]:max-w-[230px] sm:max-w-none">
        {settings?.siteName || "Vietnam Wedding Guide"}
      </span>
    </div>
  );
}