Link row

---
/** dub.co's domain row: avatar, domain + destination, click count and a status pill. */
interface Props {
	domain: string;
	destination: string;
	clicks: string;
	status?: 'verified' | 'pending';
	primary?: boolean;
}

const { domain, destination, clicks, status = 'verified', primary = false } = Astro.props;
---

<div class="flex w-full max-w-xl items-center gap-3 rounded-xl border border-border-subtle bg-bg-default p-4 shadow-[0_1px_2px_rgb(0_0_0/0.04)]">
	<span class="grid size-9 shrink-0 place-items-center rounded-full border border-border-subtle bg-bg-muted font-display text-sm font-bold text-content-emphasis">
		{domain[0].toUpperCase()}
	</span>
	<div class="min-w-0 flex-1">
		<p class="flex items-center gap-2 text-sm font-medium text-content-emphasis">
			<span class="truncate">{domain}</span>
			{primary && <span class="rounded-md bg-bg-info/50 px-1.5 py-0.5 text-[11px] text-content-info">Primary</span>}
		</p>
		<p class="truncate text-sm text-content-subtle">↳ {destination}</p>
	</div>
	<span class="hidden rounded-md border border-border-subtle px-2 py-1 text-xs text-content-default sm:inline">{clicks} clicks</span>
	<span
		class:list={[
			'rounded-md px-2 py-1 text-xs font-medium',
			status === 'verified' ? 'bg-bg-success text-content-success' : 'bg-bg-error text-content-error',
		]}
	>
		{status === 'verified' ? 'Verified' : 'Pending'}
	</span>
</div>