import type { Meta } from '@storybook/react';

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

export default {
  title: 'Components/Tooltip',
  parameters: {
    default: 'gray',
  },
} as Meta<typeof Tooltip>;

export function Example() {
  return (
    <div className="flex w-1/4 justify-center py-12">
      <Tooltip content="This has auto alignment">
        <Button>Hover me for a basic tip</Button>
      </Tooltip>
    </div>
  );
}

export function DefinedSides() {
  return (
    <div className="flex w-full justify-start px-6 py-12 gap-4">
      <Tooltip content="I am a tip to the left" side="left">
        <Button>Hot top to the left</Button>
      </Tooltip>
      <Tooltip content="I am a tip on top" side="top">
        <Button>Hot tip top</Button>
      </Tooltip>
      <Tooltip content="I am a tip underneath" side="bottom">
        <Button>Hot tip bottom</Button>
      </Tooltip>
      <Tooltip content="I am a tip to the right" side="right">
        <Button>Hot top to the right</Button>
      </Tooltip>
    </div>
  );
}

export function WithContent() {
  return (
    <div className="flex justify-start py-12">
      <Tooltip
        content={
          <div className="max-w-xs p-2">
            <h3>Tooltip with content</h3>
            <p className="text-sm leading-6">In here you can add whatever kind of content you want. Even buttons</p>
            <div className="flex gap-2 justify-end">
              <Button intent="danger">Cancel</Button>
              <Button intent="action">Done</Button>
            </div>
          </div>
        }
        side="left"
      >
        <Button>Hover me for extended tip with actions</Button>
      </Tooltip>
    </div>
  );
}
