Action Sheet (iOS)

"use client";
import { useEffect, useState } from "react";

type State = "closed" | "open" | "destructive";

export function ActionSheet({ state = "open" }: { state?: State }) {
const [open, setOpen] = useState(state !== "closed");
useEffect(() => setOpen(state !== "closed"), [state]);
const destructive = state === "destructive";

return (
  <div className="relative h-[340px] w-full max-w-sm overflow-hidden rounded-2xl border border-border bg-background/30">
    <div className="grid h-full place-items-center">
      <button
        onClick={() => setOpen(true)}
        className="rounded-md border border-border bg-background/50 px-3 py-1.5 font-mono text-xs hover:border-lab-accent"
      >
        開啟 Action Sheet
      </button>
    </div>
    {open && (
      <>
        <div
          onClick={() => setOpen(false)}
          className="absolute inset-0 bg-black/40 animate-in fade-in duration-200"
        />
        <div className="absolute inset-x-2 bottom-2 space-y-2 animate-in slide-in-from-bottom duration-300">
          <div className="overflow-hidden rounded-2xl bg-background/95 backdrop-blur-xl">
            <p className="px-4 py-3 text-center text-[11px] text-muted-foreground">
              {destructive ? "刪除此項目嗎？" : "選擇操作"}
            </p>
            {destructive && (
              <button className="flex w-full items-center justify-center border-t border-border/40 px-4 py-3 text-base font-medium text-red-500 hover:bg-red-500/5">
                刪除
              </button>
            )}
            <button className="flex w-full items-center justify-center border-t border-border/40 px-4 py-3 text-base text-lab-accent hover:bg-lab-accent/5">
              {destructive ? "保留並隱藏" : "拍照"}
            </button>
            <button className="flex w-full items-center justify-center border-t border-border/40 px-4 py-3 text-base text-lab-accent hover:bg-lab-accent/5">
              {destructive ? "回報問題" : "從相簿選取"}
            </button>
          </div>
          <button
            onClick={() => setOpen(false)}
            className="w-full rounded-2xl bg-background/95 px-4 py-3 text-base font-semibold text-lab-accent backdrop-blur-xl hover:bg-background"
          >
            取消
          </button>
        </div>
      </>
    )}
  </div>
);
}