import { Tooltip } from './Tooltip';
import { Button } from '../Button/Button';
import { Icon } from '../Icon/Icon';

export default {
  title: 'Atoms/Tooltip',
  component: Tooltip,
  tags: ['autodocs'],
  argTypes: {
    position: {
      control: 'select',
      options: ['top', 'bottom', 'left', 'right'],
    },
  },
};

export const Top = {
  args: {
    content: 'Este es un tooltip en la parte superior',
    position: 'top',
    children: <Button>Pasa el mouse aquí</Button>,
  },
};

export const Bottom = {
  args: {
    content: 'Este es un tooltip en la parte inferior',
    position: 'bottom',
    children: <Button>Pasa el mouse aquí</Button>,
  },
};

export const Left = {
  args: {
    content: 'Este es un tooltip a la izquierda',
    position: 'left',
    children: <Button>Pasa el mouse aquí</Button>,
  },
};

export const Right = {
  args: {
    content: 'Este es un tooltip a la derecha',
    position: 'right',
    children: <Button>Pasa el mouse aquí</Button>,
  },
};

export const WithIcon = {
  render: () => (
    <Tooltip content="Información adicional">
      <button className="p-2 rounded-full hover:bg-gray-100">
        <Icon name="InformationCircleIcon" className="h-5 w-5 text-gray-500" />
      </button>
    </Tooltip>
  ),
};

