<script lang="ts">
	import Heading from '../atoms/Heading.svelte';

	type Props = {
		title: string;
		description?: string;
		backgroundColor?: string;
		onClick: () => void;
	};

	let { title, description, backgroundColor = '#333333', onClick }: Props = $props();
</script>

<div
	role="button"
	tabindex="0"
	class={`inline-block cursor-pointer rounded-2xl p-4 shadow-sm transition-all duration-200 ease-in-out hover:shadow-md md:p-6`}
	style:background-color={backgroundColor}
	onclick={onClick}
	onkeydown={(e) => {
		if (e.key === 'Enter' || e.key === ' ') {
			e.preventDefault();
			onClick();
		}
	}}
>
	<Heading size="small" spacing="none">
		{title}
	</Heading>
	{#if description}
		<p class="text-sm text-gray-600">{description}</p>
	{/if}
</div>
