import { Divider } from './Divider';

export default {
  title: 'Atoms/Divider',
  component: Divider,
  tags: ['autodocs'],
  argTypes: {
    orientation: {
      control: 'select',
      options: ['horizontal', 'vertical'],
    },
    variant: {
      control: 'select',
      options: ['solid', 'dashed', 'dotted'],
    },
  },
};

export const Default = {
  args: {},
};

export const WithLabel = {
  args: {
    label: 'O',
  },
};

export const Dashed = {
  args: {
    variant: 'dashed',
  },
};

export const Dotted = {
  args: {
    variant: 'dotted',
  },
};

export const Vertical = {
  render: () => (
    <div className="flex items-center h-20">
      <span>Izquierda</span>
      <Divider orientation="vertical" />
      <span>Derecha</span>
    </div>
  ),
};

export const SmallSpacing = {
  args: {
    spacing: 'small',
  },
};

export const LargeSpacing = {
  args: {
    spacing: 'large',
  },
};

