import { useState } from 'react';
import type { Meta, StoryObj } from 'storybook-react-rsbuild';
import { SegmentedControl } from '../components/ui';

const meta = {
  title: 'Selection/SegmentedControl',
  component: SegmentedControl,
  parameters: {
    docs: {
      description: {
        component:
          'Single-select button group with animated thumb. Pass `items` array of `{ value, label }` objects, plus `value` and `onValueChange` for control.',
      },
    },
  },
  argTypes: {
    value: { control: 'text' },
    onValueChange: { action: 'value changed' },
    items: { control: false },
    className: { control: 'text' },
    disabled: { control: 'boolean' },
  },
} satisfies Meta<typeof SegmentedControl>;

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

function SegmentedDemo() {
  const [v, setV] = useState('day');
  return (
    <SegmentedControl
      value={v}
      onValueChange={setV}
      items={[
        { value: 'day', label: 'Day' },
        { value: 'week', label: 'Week' },
        { value: 'month', label: 'Month' },
      ]}
    />
  );
}

export const Playground: Story = {
  render: () => <SegmentedDemo />,
};

export const TimeRange: Story = {
  render: () => <SegmentedDemo />,
};

function OptionsDemo() {
  const [v, setV] = useState('draft');
  return (
    <SegmentedControl
      value={v}
      onValueChange={setV}
      items={[
        { value: 'draft', label: 'Draft' },
        { value: 'published', label: 'Published' },
        { value: 'archived', label: 'Archived' },
      ]}
    />
  );
}

export const Options: Story = {
  render: () => <OptionsDemo />,
};
