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 style={{ display: 'flex', paddingTop: '3rem', paddingBottom: '3rem', justifyContent: 'center', width: '25%' }}>
      <Tooltip content="This has auto alignment">
        <Button>Hover me for a basic tip</Button>
      </Tooltip>
    </div>
  );
}

export function DefinedSides() {
  return (
    <div
      style={{
        display: 'flex',
        paddingLeft: '1.5rem',
        paddingRight: '1.5rem',
        paddingTop: '3rem',
        paddingBottom: '3rem',
        gap: '1rem',
        justifyContent: 'flex-start',
        width: '100%',
      }}
    >
      <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 style={{ display: 'flex', paddingTop: '3rem', paddingBottom: '3rem', justifyContent: 'flex-start' }}>
      <Tooltip
        side="left"
        content={
          <div style={{ padding: '0.5rem', maxWidth: '20rem' }}>
            <h3>Tooltip with content</h3>
            <p style={{ fontSize: '0.875rem', lineHeight: '1.25rem' }}>
              In here you can add whatever kind of content you want. Even buttons
            </p>
            <div style={{ display: 'flex', gap: '0.5rem', justifyContent: 'flex-end' }}>
              <Button intent="danger">Cancel</Button>
              <Button intent="action">Done</Button>
            </div>
          </div>
        }
      >
        <Button>Hover me for extended tip with actions</Button>
      </Tooltip>
    </div>
  );
}
