import Link from 'next/link';
import { cn } from '@/lib/cn';
import { routes } from '@/lib/site';

/** Flag + name link. `size="sm"` for inline mentions, default for lists. */
export function CountryChip({ country, size = 'md', className, muted }: { country: { slug: string; short_name?: string; name?: string; flag_emoji?: string | null; flag?: string | null }; size?: 'sm' | 'md'; className?: string; muted?: boolean }) {
  const name = country.short_name ?? country.name ?? country.slug;
  const flag = country.flag_emoji ?? country.flag ?? '';
  return (
    <Link href={routes.country(country.slug)} className={cn('link-quiet inline-flex max-w-full items-center gap-1.5 align-baseline', size === 'sm' ? 'text-sm' : 'text-base', muted && 'text-ink-2', className)}>
      {flag ? (
        <span aria-hidden className={size === 'sm' ? 'text-sm leading-none' : 'text-lg leading-none'}>
          {flag}
        </span>
      ) : null}
      <span className="truncate">{name}</span>
    </Link>
  );
}