import { Meta, StoryObj } from '@storybook/react';
import Tooltip from './Tooltip';
import Icon from '../Icon';

const meta: Meta<typeof Tooltip> = {
  title: 'Components/Tooltip',
  component: Tooltip,
  tags: ['autodocs'],
  parameters: {
    layout: 'centered',
  },
  argTypes: {
    title: { control: 'text' },
    placement: { control: { type: 'select' } },
    disabled: { control: { type: 'boolean' } },
  },
};
type Story = StoryObj<typeof Tooltip>;
export const Default: Story = {
  args: {
    title: 'default',
    placement: 'bottom',
    children: '👀',
  },
};

export const Controlled: Story = {
  render: () => {
    return (
      <Tooltip title="delete">
        <Icon name="delete_black" />
      </Tooltip>
    );
  },
};

export const Top: Story = {
  args: {
    title: 'Top',
    placement: 'top',
    children: '👀',
  },
};

export const Left: Story = {
  args: {
    title: 'Left',
    placement: 'left',
    children: '👀',
  },
};
export const Right: Story = {
  args: {
    title: 'Right',
    placement: 'right',
    children: '👀',
  },
};
export const TopStart: Story = {
  args: {
    title: 'Top Start',
    placement: 'top-start',
    children: 'Hover on me to check top start',
  },
};
export const TopEnd: Story = {
  args: {
    title: 'Top End',
    placement: 'top-end',
    children: 'Hover on me to check top end',
  },
};
export const BottomStart: Story = {
  args: {
    title: 'Bottom Start',
    placement: 'bottom-start',
    children: 'Hover on me to check bottom start',
  },
};
export const BottomEnd: Story = {
  args: {
    title: 'Bottom End',
    placement: 'bottom-end',
    children: 'Hover on me to check bottom end',
  },
};
export default meta;