Action sheet

"use client";
import { useState, type Key } from "react";
import { LuCopy, LuDownload, LuEllipsis, LuFileText, LuShare2, LuTrash2 } from "react-icons/lu";
import {
  ActionSheet,
  ActionSheetItem,
  Alert,
  Badge,
  Button,
  ListItem,
  TopAppBar,
} from "@nexera-ui/react";

const RESULTS: Record<string, { tone: "success" | "info" | "danger"; title: string }> = {
  share: { tone: "info", title: "Share link copied for Mia Jensen and Ahmed Raza" },
  download: { tone: "success", title: "Saved “Q4 onboarding checklist.pdf” to Files" },
  duplicate: { tone: "success", title: "Created “Q4 onboarding checklist (copy)”" },
  delete: { tone: "danger", title: "Moved “Q4 onboarding checklist” to Trash" },
};

const STEPS = [
  "Laptop and accounts ready",
  "Welcome lunch booked",
  "Buddy assigned",
  "Payroll details collected",
];

/** Action sheet: share, download, duplicate or delete a document from a sheet on a phone. */
export default function ActionSheetBlock() {
  const [result, setResult] = useState<string | null>(null);
  const shown = result ? RESULTS[result] : undefined;

  return (
    <div className="@container bg-page px-4 py-8">
      <div className="mx-auto flex w-full max-w-sm flex-col overflow-hidden rounded-xl border border-default bg-page shadow-md">
        <TopAppBar
          title="Document"
          headingLevel={2}
          platform="ios"
          leadingLabel="Documents"
          leadingHref="#documents"
        />
        <div className="grid gap-4 px-4 pt-2 pb-6">
          <div className="grid gap-2 rounded-lg border border-default bg-surface p-4">
            <span
              aria-hidden="true"
              className="grid size-10 place-items-center rounded-md bg-brand-subtle text-brand-text"
            >
              <LuFileText />
            </span>
            <h3 className="text-heading-h4 text-primary">Q4 onboarding checklist</h3>
            <p className="text-body-small text-secondary">
              PDF · 284 KB · updated 2 Oct by Yuki Tanaka
            </p>
            <div className="flex flex-wrap gap-2">
              <Badge tone="brand" label="People Ops" />
              <Badge tone="neutral" label="Shared with 6" dot={false} />
            </div>
          </div>
          {shown ? (
            <Alert
              tone={shown.tone}
              title={shown.title}
              layout="compact"
              onDismiss={() => {
                setResult(null);
              }}
            />
          ) : null}
          <section aria-labelledby="action-sheet-steps" className="grid gap-2">
            <h3 id="action-sheet-steps" className="text-body-strong text-primary">
              Inside this checklist
            </h3>
            <ul className="m-0 list-none overflow-hidden rounded-lg border border-default bg-surface p-0">
              {STEPS.map((step) => (
                <li key={step} className="border-b border-subtle last:border-b-0">
                  <ListItem title={step} />
                </li>
              ))}
            </ul>
          </section>
          <ActionSheet
            aria-label="Q4 onboarding checklist"
            onAction={(key: Key) => {
              setResult(String(key));
            }}
            trigger={
              <Button
                platform="ios"
                size="lg"
                variant="secondary"
                leadingIcon={<LuEllipsis />}
                className="w-full"
              >
                More actions
              </Button>
            }
          >
            <ActionSheetItem id="share" label="Share" icon={<LuShare2 />} />
            <ActionSheetItem id="download" label="Download PDF" icon={<LuDownload />} />
            <ActionSheetItem id="duplicate" label="Duplicate" icon={<LuCopy />} />
            <ActionSheetItem
              id="delete"
              label="Delete document"
              type="destructive"
              icon={<LuTrash2 />}
            />
          </ActionSheet>
        </div>
      </div>
    </div>
  );
}