import type { Meta, StoryObj } from '@storybook/html';
import { Tooltip, type TooltipOptions } from '@42/core/tooltip';
import '@42/styles/tooltip.css';
import '@42/styles/button.css';

const meta: Meta<TooltipOptions> = {
  title: 'Core/Overlays/Tooltip',
  tags: ['autodocs'],
  argTypes: {
    placement: {
      control: 'select',
      options: ['top', 'right', 'bottom', 'left'],
    },
    offset: { control: 'number' },
    openDelay: { control: 'number' },
  },
  args: { placement: 'top', offset: 8, openDelay: 0 },
  render: (args) => {
    const root = document.createElement('span');
    root.dataset.c42Tooltip = '';
    root.innerHTML = `
      <button class="c42-button" data-variant="secondary" data-c42-tooltip-trigger>Hover me</button>
      <div data-c42-tooltip-content>Headless tooltip positioned with floating-ui</div>`;
    new Tooltip(root, args);
    return root;
  },
};

export default meta;

type Story = StoryObj<TooltipOptions>;

export const Default: Story = {};
export const Bottom: Story = { args: { placement: 'bottom' } };