import Image from "next/image";
import { BRAND_ASSETS, BRAND_NAME } from "@/lib/brand";
import { cn } from "@/lib/utils";

interface BrandLogoProps {
  size?: "sm" | "md" | "lg";
  className?: string;
}

const sizes = {
  sm: 32,
  md: 40,
  lg: 56,
};

export function BrandLogo({ size = "md", className }: BrandLogoProps) {
  const px = sizes[size];

  return (
    <div
      className={cn("brand-logo relative shrink-0 overflow-hidden", className)}
      style={{ width: px, height: px }}
    >
      <Image
        src={BRAND_ASSETS.logo}
        alt={BRAND_NAME}
        width={px}
        height={px}
        className="h-full w-full object-cover object-center"
        priority
      />
    </div>
  );
}

interface BrandMarkProps {
  subtitle?: string;
  className?: string;
}

export function BrandMark({ subtitle, className }: BrandMarkProps) {
  return (
    <div className={cn("min-w-0", className)}>
      <p className="brand-title">
        <span className="brand-title-accent">{BRAND_NAME.slice(0, 1)}</span>
        {BRAND_NAME.slice(1)}
      </p>
      {subtitle && (
        <p className="mt-0.5 text-[10px] leading-snug tracking-wide text-muted-foreground">
          {subtitle}
        </p>
      )}
    </div>
  );
}