"use client";

import { useState, type FormEvent } from "react";

/** Original UIDiscovery example. MIT licensed. Items live in component memory only. */
export function EmptyStateExample() {
  const [items, setItems] = useState<string[]>([]);
  const [draft, setDraft] = useState("");
  function add(event: FormEvent<HTMLFormElement>) { event.preventDefault(); const value = draft.trim(); if (value) { setItems([...items, value]); setDraft(""); } }
  return <section aria-label="Interactive empty state example" className="rounded-3xl border border-zinc-200 bg-white p-5 text-zinc-950 sm:p-8">
    <p className="text-xs font-semibold uppercase tracking-widest text-zinc-600">Field notes · Collection preview</p><h3 className="mt-5 text-2xl font-semibold tracking-tight">Your reading shelf</h3>
    {items.length === 0 ? <div className="mt-6 rounded-2xl border border-dashed border-zinc-300 bg-zinc-50 px-5 py-10 text-center"><span aria-hidden className="text-4xl">◇</span><h4 className="mt-3 text-lg font-semibold">A little room for inspiration</h4><p className="mx-auto mt-2 max-w-xs text-sm leading-relaxed text-zinc-600">Add a title to see how the shelf changes when it has content.</p></div> : <div className="mt-6"><p className="text-sm text-zinc-600">{items.length} {items.length === 1 ? "title" : "titles"} on your shelf</p><ul className="mt-3 space-y-2">{items.map((item, index) => <li key={`${item}-${index}`} className="flex items-center justify-between gap-3 rounded-xl border border-zinc-200 px-4 py-3"><span className="min-w-0 break-words text-sm">{item}</span><button type="button" onClick={() => setItems(items.filter((_, i) => i !== index))} aria-label={`Remove ${item}`} className="shrink-0 rounded-full px-3 py-2 text-xs font-semibold text-zinc-700 hover:bg-zinc-100 focus-visible:outline-2 focus-visible:outline-offset-2">Remove</button></li>)}</ul></div>}
    <form onSubmit={add} className="mt-6 flex flex-col gap-3 sm:flex-row"><label htmlFor="demo-item" className="sr-only">Title to add</label><input id="demo-item" value={draft} onChange={event => setDraft(event.target.value)} maxLength={80} placeholder="A title worth keeping" className="min-w-0 flex-1 rounded-xl border border-zinc-300 px-4 py-3 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black" /><button type="submit" disabled={!draft.trim()} className="rounded-full bg-zinc-950 px-6 py-3 text-sm font-semibold text-white disabled:opacity-40 active:scale-[.97] focus-visible:outline-2 focus-visible:outline-offset-4">Add title</button></form>
    <button type="button" onClick={() => { setItems([]); setDraft(""); }} className="mt-4 rounded-full border border-zinc-300 px-5 py-2 text-sm font-semibold active:scale-[.97] focus-visible:outline-2 focus-visible:outline-offset-4">Reset shelf</button><p role="status" className="mt-4 text-sm text-zinc-600">{items.length ? `Shelf contains ${items.length} ${items.length === 1 ? "title" : "titles"}.` : "The shelf is empty. No titles are stored or sent."}</p>
  </section>;
}