import * as React from 'react';
import { Select as SelectComponent } from '../select/Select';

export default {
  title: 'Components/inputs/Select',
  component: SelectComponent,
  args: { disabled: false },
  argTypes: {},
};

export const Select = ({ disabled, ...rest }: { disabled: boolean }) => (
  <fieldset disabled={disabled} className="max-w-xs">
    <SelectComponent id="select-1" {...rest} disabled={disabled}>
      <option value="option-1">
        Here is some text that is really long, longer than the max width
      </option>
      <option value="option-2">Option 2</option>
      <option value="option-3">Option 3</option>
      <option value="option-4">Option 4</option>
    </SelectComponent>
  </fieldset>
);
