<script lang="ts">
	import { PortableText } from '@portabletext/svelte';
	import { CalendarDays, MapPin, Link as LinkIcon, FilePen } from '@lucide/svelte';

	let {
		eventTitle,
		date,
		location,
		eventDescription,
		thumbnail,
		registrationLink,
		paymentLink,
		eventCategory
	} = $props();
</script>

<div class="mx-auto w-[100%] rounded-2xl bg-[#E8FFD9] p-5 text-[#0A3D2A] lg:w-[64%] lg:max-w-3xl">
	<div class="rounded-[20px] bg-[#A6D6B8]">
		<div
			class="grid h-[200px] place-items-center overflow-hidden rounded-[16px] bg-[#5CAF95]"
			aria-label="Event banner"
		>
			{#if thumbnail}
				<img class="h-full object-cover" src={thumbnail} alt="Event banner" />
			{:else if eventCategory?.[0] === 'social'}
				<img class="h-full object-cover" src="/Social.jpg" alt="Social Placeholder" />
			{:else if eventCategory?.[0] === 'technical'}
				<img class="h-full object-cover" src="/Technical.jpg" alt="Technical Placeholder" />
			{:else if eventCategory?.[0] === 'professional'}
				<img class="h-full object-cover" src="/Professional.jpg" alt="Professional Placeholder" />
			{:else if eventCategory?.[0] === 'academic'}
				<img class="h-full object-cover" src="/Academic.jpg" alt="Academic Placeholder" />
			{:else}
				<img class="h-full object-cover" src="/ECSESS.png" alt="Default Placeholder" />
			{/if}
		</div>
	</div>

	<!-- content -->
	<div class="mt-[22px] grid gap-[18px]">
		<p class="text-ecsess-800 my-0 text-center text-xl lg:text-2xl text-wrap lg:leading-8 leading-6 tracking-[0.3px]">
			{eventTitle}
		</p>

		{#if eventDescription}
			<div class="mx-auto max-w-[75ch] leading-relaxed text-[#5E8174]">
				<PortableText value={eventDescription} />
			</div>
		{/if}

		<div class="mt-[6px] grid gap-4 md:grid-cols-2">
			<div class="grid gap-[10px] rounded-2xl bg-[#CCE7BA] px-4 py-[14px]">
				<div class="flex items-center gap-2 text-[#0A3D2A]">
					<CalendarDays class="shrink-0" strokeWidth={2.5} />
					<span class="font-bold tracking-[0.2px]">Datetime:</span>
					<p class="m-0 text-left">{date}</p>
				</div>

				<div class="flex items-center gap-2 text-[#0A3D2A]">
					<MapPin class="shrink-0" strokeWidth={2.5} />
					<span class="font-bold tracking-[0.2px]">Location:</span>
					<p class="m-0 text-left">{location ?? 'TBA'}</p>
				</div>
			</div>

			<div class="grid gap-[10px] rounded-2xl bg-[#CCE7BA] px-4 py-[14px]">
				<div class="flex items-center gap-2 text-[#0A3D2A]">
					<FilePen class="shrink-0" strokeWidth={2.5} />
					<span class="font-bold tracking-[0.2px]">Registration:</span>
					{#if registrationLink}
						<a
							href={registrationLink}
							target="_blank"
							rel="noopener noreferrer"
							class="text-left text-[#0A3D2A] underline-offset-4 hover:underline"
						>
							Register Here
						</a>
					{:else}
						<p class="m-0 text-left">Just drop in!</p>
					{/if}
				</div>

				<div class="flex items-center gap-2 text-[#0A3D2A]">
					<LinkIcon class="shrink-0" strokeWidth={2.5} />
					<span class="font-bold tracking-[0.2px]">Payment:</span>
					{#if paymentLink}
						<a
							href={paymentLink}
							target="_blank"
							rel="noopener noreferrer"
							class="text-left text-[#0A3D2A] underline-offset-4 hover:underline"
						>
							Pay Here
						</a>
					{:else}
						<p class="m-0 text-left">Free!</p>
					{/if}
				</div>
			</div>
		</div>
	</div>
</div>
