<script lang="ts">
	import type { Program } from '$lib/data/programs';

	type Props = {
		program: Program;
	};

	const { program }: Props = $props();

	const accentDotByAccent = {
		blue: 'bg-[color:var(--accent-blue)]',
		yellow: 'bg-[color:var(--accent-yellow)]',
		green: 'bg-[color:var(--accent-green)]',
		red: 'bg-[color:var(--accent-red)]'
	} as const;
</script>

<a
	href={`/${program.id}`}
	class="group flex items-start gap-3 rounded-lg bg-white/80 p-4 shadow-sm ring-1 ring-black/5 transition hover:bg-white hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring)"
	aria-label={`Acessar programa ${program.name}`}
>
	<div class="grid h-10 w-10 shrink-0 place-items-center rounded-md bg-(--surface-muted) ring-1 ring-black/5">
		<img
			src={program.brandImageSrc}
			alt={`Logomarca ${program.name}`}
			class="h-7 w-7 object-contain"
			loading="lazy"
			decoding="async"
		/>
	</div>

	<div class="min-w-0 flex-1">
		<div class="flex items-center gap-2">
			<span
				aria-hidden="true"
				class={`h-2 w-2 rounded-full ${accentDotByAccent[program.accent]}`}
			></span>
			<p class="truncate text-sm font-bold text-(--text-strong)">{program.name}</p>
		</div>
		<p class="mt-1 line-clamp-2 text-xs leading-relaxed text-(--text)">{program.shortDescription}</p>
		<div class="mt-2 inline-flex items-center gap-2 text-xs font-semibold text-(--link)">
			<span class="underline-offset-4 group-hover:underline">Abrir</span>
			<span aria-hidden="true" class="transition group-hover:translate-x-0.5">→</span>
		</div>
	</div>
</a>

