<script lang="ts">
	export let name: string = 'Chelsea Russell';
	export let role: string = 'Owner / Beauty Specialist';
	export let phone: string = '+44 8008135';
	export let email: string = 'chelsea@emailaddress.com';
	export let instagram: string = '@crussell';
	export let address: string = 'Business Centre, Office Street, Work';
	export let profileImage: string =
		'https://images.icon-icons.com/5/PNG/256/MSN_messenger_user_156.png';
	export let altText: string = 'Profile picture';
</script>

<div class="mx-auto max-w-sm">
	<div class="rounded-lg border-2 border-gray-200 bg-white p-6">
		<!-- Profile Picture -->
		<div class="mb-4 flex justify-center">
			<div class="h-24 w-24 overflow-hidden rounded-full border-4 border-white shadow-lg">
				<img src={profileImage} alt={altText} class="h-full w-full object-cover" />
			</div>
		</div>
		<!-- Name and Role -->
		<div class="mb-4 text-center">
			<h2 class="text-xl font-semibold text-gray-900">{name}</h2>
			<p class="text-gray-500">{role}</p>
		</div>

		<!-- Contact Info -->
		<div class="space-y-2">
			<div class="flex items-center space-x-2">
				<svg
					xmlns="http://www.w3.org/2000/svg"
					width="16"
					height="16"
					viewBox="0 0 24 24"
					fill="none"
					stroke="currentColor"
					stroke-width="2"
					stroke-linecap="round"
					stroke-linejoin="round"
					class="feather feather-map-pin"
					><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle
						cx="12"
						cy="10"
						r="3"
					></circle></svg
				>
				<span>{address}</span>
			</div>

			<div class="flex items-center space-x-2">
				<svg
					xmlns="http://www.w3.org/2000/svg"
					width="16"
					height="16"
					viewBox="0 0 24 24"
					fill="none"
					stroke="currentColor"
					stroke-width="2"
					stroke-linecap="round"
					stroke-linejoin="round"
					class="feather feather-phone"
					><path
						d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"
					></path></svg
				>
				<a href={`tel:${phone}`} class="text-primary hover:underline">{phone}</a>
			</div>

			<div class="flex items-center space-x-2">
				<svg
					xmlns="http://www.w3.org/2000/svg"
					width="16"
					height="16"
					viewBox="0 0 24 24"
					fill="none"
					stroke="currentColor"
					stroke-width="2"
					stroke-linecap="round"
					stroke-linejoin="round"
					class="feather feather-mail"
					><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"
					></path><polyline points="22,6 12,13 2,6"></polyline></svg
				>
				<a href={`mailto:${email}`} class="text-primary hover:underline">{email}</a>
			</div>

			<div class="flex items-center space-x-2">
				<svg
					xmlns="http://www.w3.org/2000/svg"
					width="16"
					height="16"
					viewBox="0 0 24 24"
					fill="none"
					stroke="currentColor"
					stroke-width="2"
					stroke-linecap="round"
					stroke-linejoin="round"
					class="feather feather-instagram"
					><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path
						d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"
					></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg
				>
				<a
					href={`https://instagram.com/${instagram}`}
					target="_blank"
					rel="noopener"
					class="text-primary hover:underline">@{instagram}</a
				>
			</div>
		</div>
	</div>
</div>
