import Link from 'next/link';
import { Pill } from './ui';
import { UserIcon } from './Icons';

export type EnquiryRecipient = { id: number; name: string; status: string; direct: boolean };
export function EnquiryRecipients({ recipients }: { recipients: EnquiryRecipient[] }) {
  if (!recipients.length) return <span className="text-xs text-muted">Awaiting assignment</span>;
  return <ul className="space-y-2">{recipients.map(r => <li key={r.id} className="flex flex-wrap items-center gap-1.5"><UserIcon className="h-3.5 w-3.5 text-muted" /><Link href={`/leads?lawyerId=${r.id}`} className="font-medium hover:text-ledger hover:underline">{r.name}</Link><Pill value={r.status} />{r.direct && <span className="text-[11px] text-muted">Direct</span>}</li>)}</ul>;
}