---
import PageLayout from "@/layouts/Base.astro";
import { birds } from "@/data/birds";

const meta = {
	title: "/birds",
	description: "My life list — every species I've logged on Merlin Bird ID",
};
---

<PageLayout meta={meta}>
	<div class="flex min-h-screen flex-col items-start justify-start gap-6">
		<div>
      <h1 class="title">/birds</h1>
			<p class="mt-2 text-sm text-zinc-400">{birds.length} species observed</p>
		</div>
		<div class="flex w-full flex-col sm:grid sm:grid-cols-2">
			{birds.map((bird) => (
				<a
					href={`https://www.allaboutbirds.org/guide/${bird.commonName.replace(/ /g, "_")}`}
					target="_blank"
					rel="noopener noreferrer"
					class="flex items-center gap-4 border-b border-[#333] py-3 no-underline transition-opacity hover:opacity-70"
				>
					{bird.photo ? (
						<img
							src={bird.photo}
							alt={bird.commonName}
							class="h-16 w-16 flex-shrink-0 rounded object-cover"
							loading="lazy"
						/>
					) : (
						<div class="flex h-16 w-16 flex-shrink-0 items-center justify-center rounded bg-[#1a1a1a]">
							<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 opacity-30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
								<path d="M16 7h.01M3.055 11H5a2 2 0 0 1 2 2v1a2 2 0 0 0 2 2a2 2 0 0 1 2 2v2.945M8 3.935V5.5A2.5 2.5 0 0 0 10.5 8h.5a2 2 0 0 1 2 2a2 2 0 0 0 4 0a2 2 0 0 1 2-2h1.064M15 20.488V18a2 2 0 0 1 2-2h3.064M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0"/>
							</svg>
						</div>
					)}
					<div class="flex flex-col gap-0.5">
						<span class="text-base">{bird.commonName}</span>
						<span class="text-xs italic opacity-50">{bird.scientificName}</span>
						{bird.summary && (
							<span class="mt-0.5 text-xs opacity-50 line-clamp-2">{bird.summary}</span>
						)}
					</div>
				</a>
			))}
		</div>
	</div>
</PageLayout>