import Image from "next/image";
import Link from "next/link";

interface BrandLogoProps {
  size?: number;
  textClassName?: string;
}

export function BrandLogo({ size = 28, textClassName }: BrandLogoProps) {
  return (
    <Link
      href="/"
      className="flex shrink-0 flex-row items-center gap-2"
      aria-label="The Pet Loft - Home"
    >
      <Image
        src="/branding/logo.svg"
        alt="The Pet Loft"
        width={size}
        height={size}
        className="shrink-0"
        priority
      />
      <span
        className={
          textClassName ??
          "font-bold font-[family-name:var(--font-fraunces)] text-2xl tracking-tight text-[#236f6b]"
        }
      >
        <span className="font-medium lowercase">the</span>{" "}
        <span className="">Pet</span>
        <span className="text-[#f4a13a]"> Loft</span>
      </span>
    </Link>
  );
}