Init commit from initial prompt

src/components/CardItem.tsx

@@ -0,0 +1,40 @@
+"use client";
+import Image from 'next/image';
+import React from 'react';
+import type { TcgCard } from '@/types/pokemon';
+import SetBadge from './SetBadge';
+
+export default function CardItem({ card, checked, onToggle }:{ card: TcgCard; checked: boolean; onToggle: (id:string)=>void }) {
+  return (
+    <div className="group relative overflow-hidden rounded-lg border border-slate-200 bg-white shadow-sm hover:shadow-md transition">
+      <div className="absolute right-2 top-2 z-10">
+        <label className="inline-flex items-center gap-2 text-xs bg-white/90 px-2 py-1 rounded shadow border border-slate-200">
+          <input
+            type="checkbox"
+            checked={checked}
+            onChange={() => onToggle(card.id)}
+            className="h-4 w-4 rounded border-slate-300 text-sky-600 focus:ring-sky-500"
+            aria-label={`Mark ${card.name} #${card.number} as collected`}
+          />
+          <span>Collected</span>
+        </label>
+      </div>
+      <div className="relative aspect-[3/4] w-full bg-slate-100">
+        <Image
+          src={card.images.small}
+          alt={`${card.name} #${card.number}`}
+          fill
+          className="object-contain p-3"
+          sizes="(max-width: 768px) 50vw, (max-width: 1200px) 25vw, 20vw"
+        />
+      </div>
+      <div className="p-3 flex flex-col gap-2">
+        <div className="flex items-center justify-between">
+          <h3 className="font-medium truncate" title={`${card.name} #${card.number}`}>{card.name} <span className="text-slate-500">#{card.number}</span></h3>
+          {card.rarity ? <span className="text-[0.7rem] rounded bg-slate-100 px-2 py-0.5 text-slate-600">{card.rarity}</span> : null}
+        </div>
+        <SetBadge set={card.set} />
+      </div>
+    </div>
+  );
+}