import { useState } from 'react';
import { PrimaryDropdownSelect } from './PrimaryDropdownSelect';

const options = [
  { value: '', label: 'Sin nodo padre (raíz)' },
  { value: 'nodo-1', label: 'Dirección General' },
  { value: 'nodo-2', label: 'Recursos Humanos' },
];

export default {
  title: 'Inputs/PrimaryDropdownSelect',
  component: PrimaryDropdownSelect,
  tags: ['autodocs'],
};

export const Default = {
  render: () => {
    const [value, setValue] = useState('nodo-2');
    return (
      <div style={{ maxWidth: 420, padding: 24 }}>
        <PrimaryDropdownSelect
          id="demo-dropdown"
          label="Nodo padre (opcional)"
          options={options}
          value={value}
          onChange={(event) => setValue(event.target.value)}
        />
      </div>
    );
  },
};
