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

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

import { Button } from "../button/button";
import { Popover, PopoverContent, PopoverTrigger } from "./popover";

const meta = {
  title: "UI/Popover",
  component: Popover,
  tags: ["autodocs"],
  decorators: ThemeProviderDecorators,
  parameters: {
    componentSource: {
      code: 'export default "This is my code"',
      language: "typescript",
    },
  },
} satisfies Meta<typeof Popover>;

export default meta;

type Story = StoryObj<typeof Popover>;

export const CenterPopover: Story = {
  render: () => {
    return (
      <div className="flex w-full justify-center">
        <Popover>
          <PopoverTrigger asChild>
            <Button variant="outline">Popover Aç</Button>
          </PopoverTrigger>
          <PopoverContent align="center">Merhaba Dünya!</PopoverContent>
        </Popover>
      </div>
    );
  },
};
export const StartPopover: Story = {
  render: () => {
    return (
      <div className="flex w-full justify-center">
        <Popover>
          <PopoverTrigger asChild>
            <Button variant="outline">Popover Aç</Button>
          </PopoverTrigger>
          <PopoverContent align="end">Merhaba Dünya!</PopoverContent>
        </Popover>
      </div>
    );
  },
};
export const EndPopover: Story = {
  render: () => {
    return (
      <div className="flex w-full justify-center">
        <Popover>
          <PopoverTrigger asChild>
            <Button variant="outline">Popover Aç</Button>
          </PopoverTrigger>
          <PopoverContent align="start">Merhaba Dünya!</PopoverContent>
        </Popover>
      </div>
    );
  },
};