import { type Meta, type StoryObj } from '@storybook/react';

import CheckboxBase from './index';

const meta: Meta<typeof CheckboxBase> = {
  title: 'Design System/Checkbox/CheckboxBase',
  component: CheckboxBase,
  tags: ['autodocs'],
  argTypes: {
    checked: {
      control: 'boolean',
      description: 'Estado del checkbox',
    },
    disabled: {
      control: 'boolean',
      description: 'Si el checkbox está deshabilitado',
    },
    indeterminate: {
      control: 'boolean',
      description: 'Estado indeterminado del checkbox',
    },
    error: {
      control: 'boolean',
      description: 'Si el checkbox está en estado de error',
    },
    primaryColor: {
      control: 'color',
      description: 'Color primario del checkbox',
    },
    hoverBackgroundColor: {
      control: 'color',
      description: 'Color de fondo al pasar el mouse',
    },
  },
};

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

export const Default: Story = {
  args: {
    checked: false,
  },
};

export const Checked: Story = {
  args: {
    checked: true,
  },
};

export const Indeterminate: Story = {
  args: {
    indeterminate: true,
  },
};

export const Disabled: Story = {
  args: {
    disabled: true,
  },
};

export const DisabledChecked: Story = {
  args: {
    disabled: true,
    checked: true,
  },
};

export const WithError: Story = {
  args: {
    error: true,
    primaryColor: '#FF0000',
  },
};

export const CustomColors: Story = {
  args: {
    primaryColor: '#4CAF50',
    hoverBackgroundColor: '#E8F5E9',
  },
};