import { Meta, StoryObj } from '@storybook/react-webpack5';
import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
import Button from '../button';
import Tooltip from './Tooltip';

export default {
  component: Tooltip,
  title: 'Dialogs/Tooltip',
  args: {
    label: 'This is the content',
    position: 'bottom',
  },
  render: (args) => (
    <div className="text-xs-center" style={{ flexBasis: '150px' }}>
      <Tooltip {...args}>
        <Button>Hover me</Button>
      </Tooltip>
    </div>
  ),
} satisfies Meta<typeof Tooltip>;

type Story = StoryObj<typeof Tooltip>;

export const Sandbox = createSandboxStory({
  code: `<Tooltip label="Hey I'm the tooltip text — edit me!" position="bottom">
  <Button v2 size="md">Hover me</Button>
</Tooltip>`,
  scope: globalScope,
});

export const Basic: Story = {};
