<script lang="ts">
	import { reveal } from '$lib/actions/reveal';
	import type { CurrentlyReading, NowPlaying } from '$lib/types';

	let {
		currentlyReading,
		nowPlaying
	}: { currentlyReading: CurrentlyReading | null; nowPlaying: NowPlaying | null } = $props();

	// Hide the album art and reveal the music-note fallback if Cover Art Archive
	// has no front cover for this release (the URL 404s).
	let coverArtFailed = $state(false);
</script>

{#if currentlyReading || nowPlaying}
	<div id="freetime" class="mt-10 flex flex-col items-center justify-center md:mt-20" use:reveal>
		<div class="flex flex-col items-center justify-center">
			<h1 class="text-center font-urbanist text-2xl font-semibold md:text-5xl">Free Time</h1>
			<span class="text-md mt-2 px-2 text-center font-urbanist md:mt-4 md:px-5 md:text-xl">
				What I'm reading &amp; listening to right now
			</span>
		</div>
		<div class="container mt-10 grid gap-10 p-4 md:grid-cols-2">
			{#if currentlyReading}
				<div class="card bg-base-100 shadow-sm transition duration-300 hover:-translate-y-1">
					<div class="card-body flex-row items-start gap-5">
						{#if currentlyReading.cover}
							<img
								class="h-40 w-28 flex-none rounded-md object-cover shadow-sm"
								src={currentlyReading.cover}
								alt={currentlyReading.title}
							/>
						{/if}
						<div class="flex flex-col">
							<span class="badge font-urbanist badge-primary">Currently reading</span>
							<h2 class="mt-2 card-title font-urbanist text-2xl font-black">
								{currentlyReading.title}
							</h2>
							<p class="text-md font-urbanist font-medium opacity-60">
								{currentlyReading.authors}
							</p>
							<div class="mt-3 card-actions">
								<a
									class="btn font-urbanist btn-sm btn-primary"
									href={currentlyReading.bookUrl}
									target="_blank"
									rel="noopener noreferrer"
								>
									Read
								</a>
							</div>
						</div>
					</div>
				</div>
			{/if}
			{#if nowPlaying}
				<div class="card bg-base-100 shadow-sm transition duration-300 hover:-translate-y-1">
					<div class="card-body flex-row items-start gap-5">
						{#if nowPlaying.coverArt && !coverArtFailed}
							<img
								class="h-32 w-32 flex-none rounded-md object-cover shadow-sm"
								src={nowPlaying.coverArt}
								alt={nowPlaying.releaseName ?? nowPlaying.trackName}
								onerror={() => (coverArtFailed = true)}
							/>
						{:else}
							<div
								class="flex h-32 w-32 flex-none items-center justify-center rounded-md bg-base-300"
							>
								<svg
									xmlns="http://www.w3.org/2000/svg"
									class="h-12 w-12 opacity-60"
									viewBox="0 0 24 24"
									fill="currentColor"
								>
									<path
										d="M12 3v10.55A4 4 0 1 0 14 17V7h4V3h-6zm-2 16a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"
									/>
								</svg>
							</div>
						{/if}
						<div class="flex flex-col">
							<span class="badge font-urbanist badge-secondary">Now listening</span>
							<h2 class="mt-2 card-title font-urbanist text-2xl font-black">
								{nowPlaying.trackName}
							</h2>
							<p class="text-md font-urbanist font-medium opacity-60">{nowPlaying.artists}</p>
							{#if nowPlaying.releaseName}
								<p class="font-urbanist text-sm font-medium opacity-40">{nowPlaying.releaseName}</p>
							{/if}
							{#if nowPlaying.url}
								<div class="mt-3 card-actions">
									<a
										class="btn font-urbanist btn-sm btn-primary"
										href={nowPlaying.url}
										target="_blank"
										rel="noopener noreferrer"
									>
										Listen
									</a>
								</div>
							{/if}
						</div>
					</div>
				</div>
			{/if}
		</div>
	</div>
{/if}
