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

	type Props = {
		program: Program;
	};

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

	const accentClassByAccent = {
		blue: 'ring-[color:var(--accent-blue)]/25 hover:ring-[color:var(--accent-blue)]/45',
		yellow: 'ring-[color:var(--accent-yellow)]/25 hover:ring-[color:var(--accent-yellow)]/45',
		green: 'ring-[color:var(--accent-green)]/25 hover:ring-[color:var(--accent-green)]/45',
		red: 'ring-[color:var(--accent-red)]/25 hover:ring-[color:var(--accent-red)]/45'
	} as const;
</script>

<a
	href={`/${program.id}`}
	class={`group relative block overflow-hidden rounded-lg bg-white/90 p-6 shadow-sm ring-1 ring-black/5 transition hover:-translate-y-0.5 hover:bg-white hover:shadow-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring) ${accentClassByAccent[program.accent]}`}
	aria-label={`Acessar página do programa ${program.name}`}
>
	<div class="flex items-start gap-4">
		<div
			class="grid h-16 w-16 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-11 w-11 object-contain"
				loading="lazy"
				decoding="async"
			/>
		</div>

		<div class="min-w-0">
			<p class="text-base font-semibold tracking-tight text-(--text-strong)">
				{program.name}
			</p>
			<p class="mt-1 text-sm leading-relaxed text-(--text)">{program.shortDescription}</p>
		</div>
	</div>

	<div class="mt-5 flex items-center gap-2 text-sm font-semibold text-(--link)">
		<span class="underline-offset-4 group-hover:underline">Acessar</span>
		<span aria-hidden="true" class="transition group-hover:translate-x-0.5">→</span>
	</div>
</a>

