import type { Meta, StoryObj } from 'storybook-react-rsbuild';
import { AlertDialog, Button } from '../components/ui';

const meta = {
  title: 'Overlays/AlertDialog',
  component: AlertDialog,
  parameters: {
    docs: {
      description: {
        component:
          'Confirmation dialog built on Radix AlertDialog. Use for destructive or irreversible actions — focus is trapped and the cancel button is always reachable. Set `destructive` to switch the action button to the ember (red) variant.',
      },
    },
  },
  argTypes: {
    title: { control: 'text' },
    description: { control: 'text' },
    cancelLabel: { control: 'text' },
    actionLabel: { control: 'text' },
    destructive: { control: 'boolean' },
    trigger: { control: false },
  },
  args: {
    title: 'Delete this project?',
    description: 'This action cannot be undone.',
    actionLabel: 'Delete',
    cancelLabel: 'Cancel',
    destructive: true,
    trigger: <Button variant="ember">Delete…</Button>,
    onAction: () => {},
  },
} satisfies Meta<typeof AlertDialog>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Playground: Story = {};

export const Destructive: Story = {
  render: () => (
    <AlertDialog
      trigger={<Button variant="ember">Delete account</Button>}
      title="Delete your account?"
      description="All data will be permanently removed. This cannot be undone."
      actionLabel="Delete account"
      cancelLabel="Keep account"
      destructive
      onAction={() => {}}
    />
  ),
};

export const Confirm: Story = {
  render: () => (
    <AlertDialog
      trigger={<Button variant="primary">Publish</Button>}
      title="Publish changes?"
      description="This will make your changes visible to all users."
      actionLabel="Publish"
      cancelLabel="Cancel"
      onAction={() => {}}
    />
  ),
};
