import React from 'react';
import type { Meta, StoryObj } from '@storybook/react-vite';

import { Divider } from './Divider';

const meta: Meta<typeof Divider> = {
  title: 'UI kit/Divider',
  component: Divider,
  tags: ['autodocs'],
};

export default meta;
type Story = StoryObj<typeof Divider>;

export const Horizontal: Story = {
  render: args => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
      <p>First section content</p>
      <Divider {...args} />
      <p>Second section content</p>
    </div>
  ),
  args: {
    orientation: 'horizontal',
  },
};

export const OnDarkBackground: Story = {
  render: args => (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        gap: '16px',
        padding: '16px',
        backgroundColor: 'var(--colors-surface-inverted)',
        color: '#fff',
      }}
    >
      <p>First section content</p>
      <Divider {...args} />
      <p>Second section content</p>
    </div>
  ),
  args: {
    orientation: 'horizontal',
  },
};

export const Vertical: Story = {
  render: args => (
    <div style={{ display: 'flex', alignItems: 'center', gap: '16px', height: '48px' }}>
      <span>Left content</span>
      <Divider {...args} />
      <span>Right content</span>
    </div>
  ),
  args: {
    orientation: 'vertical',
  },
};