import { cn } from '@/lib/utils'

export function LogoMark({ logoUrl, name, size = 'md' }: { logoUrl: string | null; name: string; size?: 'md' | 'lg' }) {
  const box = size === 'lg' ? 'h-11 w-11 text-lg' : 'h-9 w-9 text-sm'
  return logoUrl ? (
    <img src={logoUrl} alt={`${name} logo`} className={cn(box, 'rounded object-cover shrink-0')} />
  ) : (
    <span
      aria-hidden
      className={cn(box, 'grid place-items-center font-bold shrink-0 rounded-lg')}
      style={{ backgroundColor: 'var(--store-primary)', color: 'var(--store-on-primary)' }}
    >
      {(name.trim()[0] || '•').toUpperCase()}
    </span>
  )
}