<script lang="ts">
	import { IconEdit, IconTrash } from '$lib/components/icons';

	interface Contact {
		fullName: string;
		email: string | null;
		phone: string | null;
		isPrimary: boolean;
		isActive: boolean;
	}

	interface Props {
		contact: Contact;
		onEdit: () => void;
		onDelete: () => void;
	}

	let { contact, onEdit, onDelete }: Props = $props();
</script>

<div class="rounded-lg border border-theme bg-theme p-3">
	{#if contact.isPrimary || !contact.isActive}
		<div class="mb-1.5 flex flex-wrap gap-1.5 sm:hidden">
			{#if contact.isPrimary}
				<span class="badge-primary">Primary</span>
			{/if}
			{#if !contact.isActive}
				<span class="badge-neutral">Inactive</span>
			{/if}
		</div>
	{/if}
	<div class="flex items-start justify-between gap-2">
		<div class="min-w-0 flex-1">
			<div class="flex flex-wrap items-center gap-2">
				<span class="font-medium text-theme">{contact.fullName}</span>
				{#if contact.isPrimary}
					<span class="hidden badge-primary sm:inline-flex">Primary</span>
				{/if}
				{#if !contact.isActive}
					<span class="hidden badge-neutral sm:inline-flex">Inactive</span>
				{/if}
			</div>
		</div>
		<div class="flex shrink-0 items-center gap-1">
			<button
				type="button"
				onclick={onEdit}
				class="rounded p-1.5 text-gray-500 hover:bg-black/5 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/10 dark:hover:text-gray-300"
				aria-label="Edit contact"
			>
				<IconEdit />
			</button>
			<button
				type="button"
				onclick={onDelete}
				class="rounded p-1.5 text-gray-500 hover:bg-red-50 hover:text-red-500 dark:text-gray-400 dark:hover:bg-red-900/20"
				aria-label="Delete contact"
			>
				<IconTrash />
			</button>
		</div>
	</div>
	{#if contact.email || contact.phone}
		<div class="mt-2 flex flex-col gap-1 sm:flex-row sm:flex-wrap sm:gap-x-4">
			{#if contact.email}
				<p class="text-sm text-theme-secondary">{contact.email}</p>
			{/if}
			{#if contact.phone}
				<p class="text-sm text-theme-muted">{contact.phone}</p>
			{/if}
		</div>
	{/if}
</div>
