<script lang="ts">
	import { resolve } from '$app/paths';
	import type { Service } from '$lib/types/booking';

	const {
		service,
		selected = false,
		onclick,
		showContactLink = false
	}: {
		service: Service;
		selected?: boolean;
		onclick?: () => void;
		showContactLink?: boolean;
	} = $props();

	const isGrayedOut = $derived(
		service.patch_test_status === 'required' || service.patch_test_status === 'expired'
	);
</script>

<button
	type="button"
	class="cursor-pointer rounded-lg border border-input bg-background p-4 text-left transition-colors hover:bg-fuchsia-50 hover:text-accent-foreground {selected
		? 'bg-fuchsia-100'
		: ''} {isGrayedOut ? 'opacity-50' : ''}"
	onclick={() => !isGrayedOut && onclick?.()}
	disabled={isGrayedOut}
>
	<div class="flex h-full min-h-24 flex-col justify-between">
		<div>
			<h3 class="font-semibold">{service.name}</h3>
			{#if isGrayedOut}
				<p class="text-sm text-amber-600">
					{#if service.patch_test_status === 'required'}
						Patch test required
					{:else}
						Patch test expired
					{/if}
					{#if showContactLink}
						- <a href={resolve('/contact')} class="underline">contact us</a>
					{/if}
				</p>
			{:else}
				<p class="text-sm text-gray-600">{service.description}</p>
			{/if}
		</div>
		<div class="mt-2 flex items-center justify-between text-sm text-gray-500">
			<span>{service.duration_minutes} mins</span>
			<span class="font-semibold text-foreground">£{service.price}</span>
		</div>
	</div>
</button>
