import type { Appointment } from "@/lib/local-bookings";
import { changeStatus } from "@/app/admin/local/actions";
import { AdminRefresh } from "./admin-refresh";
export function AppointmentList({appointments}:{appointments:Appointment[]}) {
  return <details open className="card mt-6 p-4 sm:p-5"><summary className="cursor-pointer font-serif text-2xl">Appointment requests <span className="font-sans text-sm text-ink/50">({appointments.length}) · expand / minimize</span></summary><div className="mt-3 flex justify-end"><AdminRefresh/></div><div className="mt-3 space-y-2">{appointments.length?appointments.map(a=><details key={a.id} className="rounded-xl border border-ink/10 p-3"><summary className="cursor-pointer"><span className="font-semibold">{a.customer_name}</span><span className="ml-3 text-sm text-rose">{a.status.replace("_"," ")}</span><span className="mt-1 block text-sm text-ink/60">{a.service_name} · {a.appointment_date} · {a.start_time.slice(0,5)}</span></summary><div className="mt-3 border-t border-ink/10 pt-3"><p className="break-words text-sm text-ink/60">{a.customer_email} · {a.customer_phone}</p>{a.notes&&<p className="mt-2 whitespace-pre-wrap text-sm">{a.notes}</p>}<form action={changeStatus} className="mt-3 flex flex-wrap gap-2"><input type="hidden" name="id" value={a.id}/><select aria-label={`Status for ${a.customer_name}`} name="status" defaultValue={a.status} className="field !w-auto !py-2">{["requested","confirmed","completed","cancelled","no_show"].map(status=><option key={status} value={status}>{status.replace("_"," ")}</option>)}</select><button className="btn-dark !min-h-10">Save</button></form></div></details>):<p className="text-ink/60">No appointment requests yet.</p>}</div></details>;
}