import type { Meta, StoryObj } from '@storybook/react'
import { SegmentController, SegmentControllerItem } from './SegmentController'

const meta: Meta<typeof SegmentController> = {
  title: 'Blocks/SegmentController',
  component: SegmentController,
  argTypes: {
    defaultValue: {
      control: 'text',
      description: 'The default selected value',
    },
    size: {
      control: 'radio',
      options: ['default', 'sm', 'xs'],
    },
  },
}

export default meta
type Story = StoryObj<typeof SegmentController>

export const Default: Story = {
  args: {
    defaultValue: 'b',
  },
  render: (args) => (
    <div className="flex w-fit max-w-md">
      <SegmentController {...args}>
        <SegmentControllerItem value="a">A</SegmentControllerItem>
        <SegmentControllerItem value="b">B</SegmentControllerItem>
        <SegmentControllerItem value="c">C</SegmentControllerItem>
      </SegmentController>
    </div>
  ),
}

export const Small: Story = {
  args: {
    size: 'sm',
    defaultValue: 'center',
  },
  render: (args) => (
    <div className="flex w-fit max-w-md">
      <SegmentController {...args}>
        <SegmentControllerItem value="left">Left</SegmentControllerItem>
        <SegmentControllerItem value="center">Center</SegmentControllerItem>
        <SegmentControllerItem value="right">Right</SegmentControllerItem>
      </SegmentController>
    </div>
  ),
}

export const ExtraSmall: Story = {
  args: {
    size: 'xs',
    defaultValue: 'c',
  },
  render: (args) => (
    <div className="flex w-fit max-w-md">
      <SegmentController {...args}>
        <SegmentControllerItem value="a">A</SegmentControllerItem>
        <SegmentControllerItem value="b">B</SegmentControllerItem>
        <SegmentControllerItem value="c">C</SegmentControllerItem>
      </SegmentController>
    </div>
  ),
}

export const UnitExample: Story = {
  args: {
    size: 'xs',
    defaultValue: 'usd',
  },
  render: (args) => (
    <div className="flex w-1/4 flex-col gap-2">
      <SegmentController {...args}>
        <SegmentControllerItem value="usd">USD</SegmentControllerItem>
        <SegmentControllerItem value="link">LINK</SegmentControllerItem>
      </SegmentController>
    </div>
  ),
}