import React from 'react';
import Radio, { RadioProps } from '../components/Forms/Radio';
import { Story } from '@storybook/react';

export default {
  title: 'Forms / Radio',
  component: Radio,
};

const Template: Story<RadioProps> = () => (
  <div className="flex flex-col gap-2 w-[540px]">
    <Radio
      title="Click ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick This Click ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick ThisClick This"
      id="input--someId1"
      callback={(e, v) => console.log(e, v)}
      value="some-value1"
      checked={true}
      name="groupName"
    />
    <Radio
      title="Or This"
      id="input--someId2"
      callback={(e, v) => console.log(e, v)}
      value="some-value2"
      checked={false}
      name="groupName"
    />
    <Radio
      title="Not This"
      id="input--someId3"
      callback={(e, v) => console.log(e, v)}
      value="some-value3"
      checked={false}
      name="groupName"
      disabled
    />
  </div>
);

export const Default = Template.bind({});
Default.args = {};