import { useState } from 'react';
import type { StoryObj, Meta } from '@storybook/react';

import { Slider } from '.';

const meta: Meta<typeof Slider> = {
  title: 'Components/Slider',
  component: Slider,
  argTypes: {},
};

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

export const Default: Story = {
  args: {
    'aria-label': 'volume',
    defaultValue: [50],
    max: 100,
    step: 1,
  },
};

export const Vertical: Story = {
  args: {
    'aria-label': 'volume',
    defaultValue: [25],
    max: 100,
    orientation: 'vertical',
    step: 1,
  },
};

export const TransparentRange: Story = {
  args: {
    'aria-label': 'volume',
    defaultValue: [25],
    max: 100,
    step: 1,
    transparentRange: true,
  },
};

export const Controlled: Story = {
  render: () => {
    const [value, setValue] = useState<number[]>([25]);

    return (
      <div>
        <Slider aria-label="volume" step={1} max={100} onValueChange={setValue} value={value} />
        <pre>{value}</pre>
      </div>
    );
  },
};
