import type { Meta, StoryObj } from '@storybook/react';
import { Tooltip, TooltipContent, TooltipTrigger, TooltipProvider } from './tooltip';
import { Button } from '../button';
import { Plus, Settings } from 'lucide-react';
import React from 'react';

const meta: Meta<typeof Tooltip> = {
  title: 'UI/Tooltip',
  component: Tooltip,
  render: args => <Tooltip {...args} />,
  argTypes: {
    delayDuration: {
      control: { type: 'number', min: 0, max: 1000, step: 100 },
      description:
        'The duration from when the mouse hovers over the trigger until the tooltip opens.',
      defaultValue: 700,
    },
  },
  decorators: [
    Story => (
      <TooltipProvider>
        <div className="flex items-center justify-center p-12">
          <Story />
        </div>
      </TooltipProvider>
    ),
  ],
};

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

export const Default: Story = {
  render: args => (
    <Tooltip {...args}>
      <TooltipTrigger asChild>
        <Button variant="outline">Hover me</Button>
      </TooltipTrigger>
      <TooltipContent>
        <p>Add to library</p>
      </TooltipContent>
    </Tooltip>
  ),
};

export const IconOnly: Story = {
  render: () => (
    <Tooltip>
      <TooltipTrigger asChild>
        <Button variant="ghost" size="icon">
          <Settings className="size-4" />
          <span className="sr-only">Settings</span>
        </Button>
      </TooltipTrigger>
      <TooltipContent>
        <p>Project Settings</p>
      </TooltipContent>
    </Tooltip>
  ),
};

export const Position: Story = {
  render: () => (
    <div className="flex flex-col gap-4">
      <Tooltip>
        <TooltipTrigger asChild>
          <Button variant="outline">Right</Button>
        </TooltipTrigger>
        <TooltipContent side="right">
          <p>Tooltip on the right</p>
        </TooltipContent>
      </Tooltip>
      <Tooltip>
        <TooltipTrigger asChild>
          <Button variant="outline">Bottom</Button>
        </TooltipTrigger>
        <TooltipContent side="bottom">
          <p>Tooltip on the bottom</p>
        </TooltipContent>
      </Tooltip>
    </div>
  ),
};