---
/**
 * Logo Component
 *
 * - variant='logomark' (default): brand-coloured square badge with first letter
 * - variant='full': horizontal SVG logo (icon + wordmark)
 */
import { cn } from '@/lib/cn';
import siteConfig from '@/config/site.config';
import logoHorizontal from '@/assets/logo-horizontal.svg?raw';

interface Props {
  /** Size preset */
  size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
  /** Force dark mode logo (for dark backgrounds) — no-op here, kept for API compat */
  forceDark?: boolean;
  /** 'logomark': monogram badge | 'full': horizontal SVG logo */
  variant?: 'logomark' | 'full';
  /** Additional CSS classes */
  class?: string;
  /** Override the displayed letter (logomark only). Defaults to first letter of site name. */
  letter?: string;
}

const {
  size = 'md',
  variant = 'logomark',
  class: className,
  letter: letterProp,
} = Astro.props;

const sizeClasses: Record<string, { box: string; text: string; radius: string }> = {
  sm:    { box: 'w-5 h-5',   text: 'text-[14px]', radius: 'rounded-[4px]' },
  md:    { box: 'w-6 h-6',   text: 'text-[16px]', radius: 'rounded-[5px]' },
  lg:    { box: 'w-8 h-8',   text: 'text-[22px]', radius: 'rounded-[6px]' },
  xl:    { box: 'w-12 h-12', text: 'text-[34px]', radius: 'rounded-[8px]' },
  '2xl': { box: 'w-24 h-24', text: 'text-[68px]', radius: 'rounded-[14px]' },
};

const { box, text, radius } = sizeClasses[size] ?? sizeClasses.md;
const letter = letterProp ?? siteConfig.name.charAt(0).toUpperCase();

const fullHeights: Record<string, string> = {
  sm:    'h-4',
  md:    'h-5',
  lg:    'h-7',
  xl:    'h-10',
  '2xl': 'h-16',
};
const fullHeight = fullHeights[size] ?? fullHeights.md;
---

{variant === 'full' ? (
  <span
    class={cn('inline-flex items-center shrink-0 text-foreground', fullHeight, className)}
    aria-label={siteConfig.branding.logo.alt}
    role="img"
  >
    <Fragment set:html={logoHorizontal} />
  </span>
) : (
  <span
    class={cn(
      'inline-flex items-center justify-center shrink-0',
      'bg-brand-500 text-white',
      'font-display font-bold leading-none select-none',
      box, text, radius,
      className
    )}
    aria-label={siteConfig.branding.logo.alt}
    role="img"
  >
    {letter}
  </span>
)}
