<script lang="ts">
	import ServiceCard from './ServiceCard.svelte';
	import type { Service } from '$lib/types/booking';

	const {
		services = [],
		selected = [],
		loading = true,
		ontoggle,
		showContactLink = false
	}: {
		services?: Service[];
		selected?: Service[];
		loading?: boolean;
		ontoggle?: (service: Service) => void;
		showContactLink?: boolean;
	} = $props();

	function isServiceSelected(service: Service): boolean {
		return selected.some((s) => s.id === service.id);
	}
</script>

<div class="grid w-full grid-cols-1 gap-4 md:grid-cols-2">
	{#if loading}
		<p>Loading services...</p>
	{:else if services.length === 0}
		<p>No services available at the moment.</p>
	{:else}
		{#each services as service (service.id)}
			<ServiceCard
				{service}
				selected={isServiceSelected(service)}
				onclick={() => ontoggle?.(service)}
				{showContactLink}
			/>
		{/each}
	{/if}
</div>
