import type { Meta, StoryObj } from '@storybook/html';
import '@42/styles/divider.css';

interface DividerArgs {
  label: string;
}

const meta: Meta<DividerArgs> = {
  title: 'Presentational/Divider',
  tags: ['autodocs'],
  argTypes: { label: { control: 'text' } },
  args: { label: '' },
  render: ({ label }) => {
    const wrapper = document.createElement('div');
    wrapper.style.width = '20rem';
    if (label) {
      wrapper.innerHTML = `<div class="c42-divider-label"><span>${label}</span></div>`;
    } else {
      wrapper.innerHTML = '<hr class="c42-divider" />';
    }
    return wrapper;
  },
};

export default meta;

type Story = StoryObj<DividerArgs>;

export const Plain: Story = {};
export const Labelled: Story = { args: { label: 'or' } };