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

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

import { Tooltip } from "./tooltip";

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

export default meta;

type Story = StoryObj<typeof Tooltip>;

export const DefaultTooltip: Story = {
  render: () => {
    return (
      <div className="flex w-full justify-center">
        <Tooltip position="right" label={<p>Tooltip Content</p>}>
          <button type="button">Hover</button>
        </Tooltip>
      </div>
    );
  },
};

export const PrimaryToolTip: Story = {
  render: () => {
    return (
      <div className="flex w-full justify-center">
        <Tooltip
          position="left"
          variant="primary"
          label={<p>Tooltip Content</p>}
        >
          <button type="button">Hover</button>
        </Tooltip>
      </div>
    );
  },
};

export const SuccessTooltip: Story = {
  render: () => {
    return (
      <div className="mt-10 flex w-full justify-center">
        <Tooltip
          position="top"
          variant="success"
          label={<p>Tooltip Content</p>}
        >
          <button type="button">Hover</button>
        </Tooltip>
      </div>
    );
  },
};
export const DangerTooltip: Story = {
  render: () => {
    return (
      <div className="flex w-full justify-center">
        <Tooltip
          position="bottom"
          variant="danger"
          label={<p>Tooltip Content</p>}
        >
          <button type="button">Hover</button>
        </Tooltip>
      </div>
    );
  },
};