<script lang="ts">
	export let yesterdayCharacter: any;
</script>

<section class="mt-8 rounded-3xl border border-white/10 bg-white/5 p-6 shadow-[0_24px_60px_rgba(0,0,0,0.45)] backdrop-blur">
	{#if yesterdayCharacter}
		<div class="flex flex-col items-center gap-5 text-center sm:flex-row sm:text-left">
			{#if yesterdayCharacter.pictureUrl}
				<img
					src={yesterdayCharacter.pictureUrl}
					alt={yesterdayCharacter.name}
					class="h-20 w-20 rounded-full border border-amber-200/40 object-cover"
				/>
			{:else}
				<div class="flex h-20 w-20 items-center justify-center rounded-full border border-amber-200/40 bg-slate-900/70 text-xs uppercase tracking-[0.25em] text-amber-100">
					Photo
				</div>
			{/if}
			<div class="flex-1">
				<p class="text-xs font-semibold uppercase tracking-[0.28em] text-amber-100">Personnage d'hier</p>
				<p class="mt-2 text-lg font-semibold text-white">{yesterdayCharacter.name}</p>
				{#if yesterdayCharacter.epithets}
					<p class="mt-1 text-sm text-slate-400">
						{typeof yesterdayCharacter.epithets === 'string' 
							? JSON.parse(yesterdayCharacter.epithets).join(', ') 
							: (yesterdayCharacter.epithets as string[]).join(', ')}
					</p>
				{/if}
			</div>
			<a
				href={"https://onepiece.fandom.com/fr/wiki/" + yesterdayCharacter.url}
				target="_blank"
				rel="noopener noreferrer"
				class="w-full rounded-full border border-amber-200/40 bg-transparent px-5 py-3 text-sm font-semibold text-amber-100 transition hover:border-amber-200 hover:text-amber-50 sm:w-auto"
			>
				Voir la page
			</a>
		</div>
	{:else}
		<div class="flex flex-col items-center gap-5 text-center sm:flex-row sm:text-left">
			<div class="flex h-20 w-20 items-center justify-center rounded-full border border-amber-200/40 bg-slate-900/70 text-xs uppercase tracking-[0.25em] text-amber-100">
				Photo
			</div>
			<div class="flex-1">
				<p class="text-xs font-semibold uppercase tracking-[0.28em] text-amber-100">Personnage d'hier</p>
				<p class="mt-2 text-lg font-semibold text-white">Aucun personnage</p>
				<p class="mt-1 text-sm text-slate-200">Aucun personnage d'hier disponible</p>
			</div>
		</div>
	{/if}
</section>
