import type { Meta, StoryObj } from "@storybook/react";

import { ThemeProviderDecorators } from "@/storybook/Decorator";

import { Button } from "../button/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "./dialog";

const meta = {
  title: "UI/Dialog",
  component: Dialog,
  tags: ["autodocs"],
  decorators: ThemeProviderDecorators,
} satisfies Meta<typeof Dialog>;

export default meta;

type Story = StoryObj<typeof Dialog>;

export const DefaultDialog: Story = {
  render: () => (
    <Dialog>
      <DialogTrigger>
        <Button variant="primary">Open your pretty dialog </Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Are you sure absolutely sure?</DialogTitle>
          <DialogDescription>
            This action cannot be undone. This will permanently delete your
            account and remove your data from our servers.
          </DialogDescription>
        </DialogHeader>
      </DialogContent>
    </Dialog>
  ),
};
export const CustomDialog: Story = {
  render: () => (
    <Dialog>
      <DialogTrigger>
        <Button variant="primary">Open your pretty dialog </Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>This is a title</DialogTitle>
          <DialogDescription>
            This is a excellent title description.
          </DialogDescription>
        </DialogHeader>
        <div className="grid gap-4 py-4">YOUR AWESOME CONTENT!!! 🚀</div>
        <DialogFooter>
          <Button variant="destructive">Don`t remove me :(</Button>
          <Button variant="outline">What do you want?</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  ),
};