<script lang="ts">
	interface BoardSummary {
		id: string;
		name: string;
		icon: string | null;
		description: string | null;
		isDefault: boolean;
		isGuestAccessible: boolean;
		_count?: { sections: number };
	}

	interface Props {
		board: BoardSummary;
	}

	let { board }: Props = $props();

	const sectionCount = $derived(board._count?.sections ?? 0);
</script>

<a
	href="/boards/{board.id}"
	class="card-hover group block rounded-xl border border-border bg-card p-5 transition-colors hover:border-primary/50"
>
	<div class="flex items-start gap-3">
		{#if board.icon}
			<span class="text-xl">{board.icon}</span>
		{:else}
			<span class="flex h-8 w-8 items-center justify-center rounded-md bg-muted text-sm text-muted-foreground">
				B
			</span>
		{/if}
		<div class="min-w-0 flex-1">
			<div class="flex items-center gap-2">
				<h3 class="truncate font-semibold text-foreground transition-colors group-hover:text-primary">
					{board.name}
				</h3>
				{#if board.isDefault}
					<span class="shrink-0 rounded bg-primary/15 px-1.5 py-0.5 text-xs text-primary">
						Default
					</span>
				{/if}
				{#if board.isGuestAccessible}
					<span class="shrink-0 rounded bg-accent px-1.5 py-0.5 text-xs text-accent-foreground">
						Guest
					</span>
				{/if}
			</div>
			{#if board.description}
				<p class="mt-1 line-clamp-2 text-sm text-muted-foreground">{board.description}</p>
			{/if}
			<p class="mt-2 text-xs text-muted-foreground/70">
				{sectionCount} section{sectionCount === 1 ? '' : 's'}
			</p>
		</div>
	</div>
</a>
