import type { Meta, StoryObj } from '@storybook/html';
import { Dropdown, type DropdownOptions } from '@42/core/dropdown';
import '@42/styles/dropdown.css';
import '@42/styles/button.css';

const meta: Meta<DropdownOptions> = {
  title: 'Core/Overlays/Dropdown',
  tags: ['autodocs'],
  argTypes: {
    placement: {
      control: 'select',
      options: ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
    },
    closeOnSelect: { control: 'boolean' },
  },
  args: { placement: 'bottom-start', closeOnSelect: true },
  render: (args) => {
    const root = document.createElement('div');
    root.dataset.c42Dropdown = '';
    root.innerHTML = `
      <button class="c42-button" data-c42-dropdown-trigger>Actions</button>
      <div data-c42-dropdown-menu>
        <button data-c42-dropdown-item>Edit</button>
        <button data-c42-dropdown-item>Duplicate</button>
        <button data-c42-dropdown-item>Delete</button>
      </div>`;
    new Dropdown(root, args);
    return root;
  },
};

export default meta;

type Story = StoryObj<DropdownOptions>;

export const Default: Story = {};