<script lang="ts">
	import ContactCard from '$lib/components/layout/ContactCard.svelte';
	import { onMount } from 'svelte';

	type ContactInfo = {
		name: string;
		role: string;
		phone: string;
		email: string;
		profilePicUrl?: string;
	};

	let contact = $state<ContactInfo | null>(null);
	let loading = $state(true);

	onMount(async () => {
		try {
			const res = await fetch('/api/contact');
			if (res.ok) {
				contact = await res.json();
			}
		} catch (err) {
			console.error('Failed to load contact info:', err);
		} finally {
			loading = false;
		}
	});
</script>

<section class="py-12">
	<h1 class="mb-8 text-center text-2xl font-semibold">Contact Me</h1>
	{#if loading}
		<div class="mx-auto max-w-sm animate-pulse rounded-lg border-2 border-gray-200 bg-white p-6">
			<div class="mb-4 flex justify-center">
				<div class="h-24 w-24 rounded-full bg-gray-200"></div>
			</div>
			<div class="mb-4 text-center">
				<div class="mx-auto mb-2 h-6 w-40 rounded bg-gray-200"></div>
				<div class="mx-auto h-4 w-32 rounded bg-gray-200"></div>
			</div>
		</div>
	{:else if contact}
		<ContactCard
			name={contact.name}
			role={contact.role}
			phone={contact.phone}
			email={contact.email}
			instagram="crussell"
			address="Business Centre, Office Street, Work"
			profileImage={contact.profilePicUrl || 'https://images.icon-icons.com/5/PNG/256/MSN_messenger_user_156.png'}
		/>
	{:else}
		<ContactCard
			name="Chelsea Russell"
			role="Owner / Beauty Specialist"
			phone="+44 8008135"
			email="chelsea@emailaddress.com"
			instagram="crussell"
			address="Business Centre, Office Street, Work"
		/>
	{/if}
</section>
