import { Button } from './Button';

export default {
  title: 'Atoms/Button',
  component: Button,
  tags: ['autodocs'],
  argTypes: {
    texto: {
      control: 'text',
      description: 'Texto a mostrar en el botón',
    },
    tipo: {
      control: 'select',
      options: ['Primary', 'Secondary', 'Ghost'],
      description: 'Tipo del botón',
    },
    color: {
      control: 'select',
      options: ['Teal', 'Grape', 'Honey'],
      description: 'Color del botón',
    },
    tamaño: {
      control: 'select',
      options: ['Small', 'Default', 'Large'],
      description: 'Tamaño del botón',
    },
    onClick: {
      action: 'clicked',
      description: 'Función a ejecutar cuando se hace click',
    },
    disabled: {
      control: 'boolean',
      description: 'Estado deshabilitado',
    },
  },
};

// Grid de todas las variantes según el diseño
export const AllVariants = {
  render: () => (
    <div className="space-y-12">
      {/* Teal Theme */}
      <div>
        <h2 className="text-lg font-bold text-gray-900 mb-6">Teal</h2>
        <div className="space-y-6">
          {/* Primary */}
          <div>
            <h3 className="text-sm font-semibold text-gray-700 mb-4">Primary</h3>
            <div className="flex items-center gap-6">
              <div className="flex flex-col items-center gap-2">
                <span className="text-xs text-gray-500">Small</span>
                <Button texto="Button" tipo="Primary" color="Teal" tamaño="Small" />
              </div>
              <div className="flex flex-col items-center gap-2">
                <span className="text-xs text-gray-500">Default</span>
                <Button texto="Button" tipo="Primary" color="Teal" tamaño="Default" />
              </div>
              <div className="flex flex-col items-center gap-2">
                <span className="text-xs text-gray-500">Large</span>
                <Button texto="Button" tipo="Primary" color="Teal" tamaño="Large" />
              </div>
            </div>
          </div>

          {/* Secondary */}
          <div>
            <h3 className="text-sm font-semibold text-gray-700 mb-4">Secondary</h3>
            <div className="flex items-center gap-6">
              <div className="flex flex-col items-center gap-2">
                <span className="text-xs text-gray-500">Small</span>
                <Button texto="Button" tipo="Secondary" color="Teal" tamaño="Small" />
              </div>
              <div className="flex flex-col items-center gap-2">
                <span className="text-xs text-gray-500">Default</span>
                <Button texto="Button" tipo="Secondary" color="Teal" tamaño="Default" />
              </div>
              <div className="flex flex-col items-center gap-2">
                <span className="text-xs text-gray-500">Large</span>
                <Button texto="Button" tipo="Secondary" color="Teal" tamaño="Large" />
              </div>
            </div>
          </div>

          {/* Ghost */}
          <div>
            <h3 className="text-sm font-semibold text-gray-700 mb-4">Ghost</h3>
            <div className="flex items-center gap-6">
              <div className="flex flex-col items-center gap-2">
                <span className="text-xs text-gray-500">Small</span>
                <Button texto="Button" tipo="Ghost" color="Teal" tamaño="Small" />
              </div>
              <div className="flex flex-col items-center gap-2">
                <span className="text-xs text-gray-500">Default</span>
                <Button texto="Button" tipo="Ghost" color="Teal" tamaño="Default" />
              </div>
              <div className="flex flex-col items-center gap-2">
                <span className="text-xs text-gray-500">Large</span>
                <Button texto="Button" tipo="Ghost" color="Teal" tamaño="Large" />
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Grape Theme */}
      <div>
        <h2 className="text-lg font-bold text-gray-900 mb-6">Grape</h2>
        <div className="space-y-6">
          {/* Primary */}
          <div>
            <h3 className="text-sm font-semibold text-gray-700 mb-4">Primary</h3>
            <div className="flex items-center gap-6">
              <div className="flex flex-col items-center gap-2">
                <span className="text-xs text-gray-500">Small</span>
                <Button texto="Button" tipo="Primary" color="Grape" tamaño="Small" />
              </div>
              <div className="flex flex-col items-center gap-2">
                <span className="text-xs text-gray-500">Default</span>
                <Button texto="Button" tipo="Primary" color="Grape" tamaño="Default" />
              </div>
              <div className="flex flex-col items-center gap-2">
                <span className="text-xs text-gray-500">Large</span>
                <Button texto="Button" tipo="Primary" color="Grape" tamaño="Large" />
              </div>
            </div>
          </div>

          {/* Secondary */}
          <div>
            <h3 className="text-sm font-semibold text-gray-700 mb-4">Secondary</h3>
            <div className="flex items-center gap-6">
              <div className="flex flex-col items-center gap-2">
                <span className="text-xs text-gray-500">Small</span>
                <Button texto="Button" tipo="Secondary" color="Grape" tamaño="Small" />
              </div>
              <div className="flex flex-col items-center gap-2">
                <span className="text-xs text-gray-500">Default</span>
                <Button texto="Button" tipo="Secondary" color="Grape" tamaño="Default" />
              </div>
              <div className="flex flex-col items-center gap-2">
                <span className="text-xs text-gray-500">Large</span>
                <Button texto="Button" tipo="Secondary" color="Grape" tamaño="Large" />
              </div>
            </div>
          </div>

          {/* Ghost */}
          <div>
            <h3 className="text-sm font-semibold text-gray-700 mb-4">Ghost</h3>
            <div className="flex items-center gap-6">
              <div className="flex flex-col items-center gap-2">
                <span className="text-xs text-gray-500">Small</span>
                <Button texto="Button" tipo="Ghost" color="Grape" tamaño="Small" />
              </div>
              <div className="flex flex-col items-center gap-2">
                <span className="text-xs text-gray-500">Default</span>
                <Button texto="Button" tipo="Ghost" color="Grape" tamaño="Default" />
              </div>
              <div className="flex flex-col items-center gap-2">
                <span className="text-xs text-gray-500">Large</span>
                <Button texto="Button" tipo="Ghost" color="Grape" tamaño="Large" />
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Honey Theme */}
      <div>
        <h2 className="text-lg font-bold text-gray-900 mb-6">Honey</h2>
        <div className="space-y-6">
          {/* Primary */}
          <div>
            <h3 className="text-sm font-semibold text-gray-700 mb-4">Primary</h3>
            <div className="flex items-center gap-6">
              <div className="flex flex-col items-center gap-2">
                <span className="text-xs text-gray-500">Small</span>
                <Button texto="Button" tipo="Primary" color="Honey" tamaño="Small" />
              </div>
              <div className="flex flex-col items-center gap-2">
                <span className="text-xs text-gray-500">Default</span>
                <Button texto="Button" tipo="Primary" color="Honey" tamaño="Default" />
              </div>
              <div className="flex flex-col items-center gap-2">
                <span className="text-xs text-gray-500">Large</span>
                <Button texto="Button" tipo="Primary" color="Honey" tamaño="Large" />
              </div>
            </div>
          </div>

          {/* Secondary */}
          <div>
            <h3 className="text-sm font-semibold text-gray-700 mb-4">Secondary</h3>
            <div className="flex items-center gap-6">
              <div className="flex flex-col items-center gap-2">
                <span className="text-xs text-gray-500">Small</span>
                <Button texto="Button" tipo="Secondary" color="Honey" tamaño="Small" />
              </div>
              <div className="flex flex-col items-center gap-2">
                <span className="text-xs text-gray-500">Default</span>
                <Button texto="Button" tipo="Secondary" color="Honey" tamaño="Default" />
              </div>
              <div className="flex flex-col items-center gap-2">
                <span className="text-xs text-gray-500">Large</span>
                <Button texto="Button" tipo="Secondary" color="Honey" tamaño="Large" />
              </div>
            </div>
          </div>

          {/* Ghost */}
          <div>
            <h3 className="text-sm font-semibold text-gray-700 mb-4">Ghost</h3>
            <div className="flex items-center gap-6">
              <div className="flex flex-col items-center gap-2">
                <span className="text-xs text-gray-500">Small</span>
                <Button texto="Button" tipo="Ghost" color="Honey" tamaño="Small" />
              </div>
              <div className="flex flex-col items-center gap-2">
                <span className="text-xs text-gray-500">Default</span>
                <Button texto="Button" tipo="Ghost" color="Honey" tamaño="Default" />
              </div>
              <div className="flex flex-col items-center gap-2">
                <span className="text-xs text-gray-500">Large</span>
                <Button texto="Button" tipo="Ghost" color="Honey" tamaño="Large" />
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Disabled States */}
      <div>
        <h2 className="text-lg font-bold text-gray-900 mb-6">Disabled</h2>
        <div className="space-y-6">
          {/* Primary Disabled */}
          <div>
            <h3 className="text-sm font-semibold text-gray-700 mb-4">Primary</h3>
            <div className="flex items-center gap-6">
              <div className="flex flex-col items-center gap-2">
                <span className="text-xs text-gray-500">Small</span>
                <Button texto="Button" tipo="Primary" color="Teal" tamaño="Small" disabled />
              </div>
              <div className="flex flex-col items-center gap-2">
                <span className="text-xs text-gray-500">Default</span>
                <Button texto="Button" tipo="Primary" color="Teal" tamaño="Default" disabled />
              </div>
              <div className="flex flex-col items-center gap-2">
                <span className="text-xs text-gray-500">Large</span>
                <Button texto="Button" tipo="Primary" color="Teal" tamaño="Large" disabled />
              </div>
            </div>
          </div>

          {/* Outline Disabled (Secondary disabled) */}
          <div>
            <h3 className="text-sm font-semibold text-gray-700 mb-4">Outline</h3>
            <div className="flex items-center gap-6">
              <div className="flex flex-col items-center gap-2">
                <span className="text-xs text-gray-500">Small</span>
                <Button texto="Button" tipo="Secondary" color="Teal" tamaño="Small" disabled />
              </div>
              <div className="flex flex-col items-center gap-2">
                <span className="text-xs text-gray-500">Default</span>
                <Button texto="Button" tipo="Secondary" color="Teal" tamaño="Default" disabled />
              </div>
              <div className="flex flex-col items-center gap-2">
                <span className="text-xs text-gray-500">Large</span>
                <Button texto="Button" tipo="Secondary" color="Teal" tamaño="Large" disabled />
              </div>
            </div>
          </div>

          {/* Ghost Disabled */}
          <div>
            <h3 className="text-sm font-semibold text-gray-700 mb-4">Ghost</h3>
            <div className="flex items-center gap-6">
              <div className="flex flex-col items-center gap-2">
                <span className="text-xs text-gray-500">Small</span>
                <Button texto="Button" tipo="Ghost" color="Teal" tamaño="Small" disabled />
              </div>
              <div className="flex flex-col items-center gap-2">
                <span className="text-xs text-gray-500">Default</span>
                <Button texto="Button" tipo="Ghost" color="Teal" tamaño="Default" disabled />
              </div>
              <div className="flex flex-col items-center gap-2">
                <span className="text-xs text-gray-500">Large</span>
                <Button texto="Button" tipo="Ghost" color="Teal" tamaño="Large" disabled />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  ),
};

// Ejemplos individuales
export const Primary = {
  args: {
    texto: 'Button',
    tipo: 'Primary',
    tamaño: 'Default',
  },
};

export const Secondary = {
  args: {
    texto: 'Button',
    tipo: 'Secondary',
    tamaño: 'Default',
  },
};

export const Ghost = {
  args: {
    texto: 'Button',
    tipo: 'Ghost',
    tamaño: 'Default',
  },
};

export const Disabled = {
  args: {
    texto: 'Button',
    tipo: 'Primary',
    color: 'Teal',
    tamaño: 'Default',
    disabled: true,
  },
};

export const Small = {
  args: {
    texto: 'Button',
    tipo: 'Primary',
    tamaño: 'Small',
  },
};

export const Default = {
  args: {
    texto: 'Button',
    tipo: 'Primary',
    tamaño: 'Default',
  },
};

export const Large = {
  args: {
    texto: 'Button',
    tipo: 'Primary',
    tamaño: 'Large',
  },
};

// Ejemplo con onClick
export const WithClickHandler = {
  args: {
    texto: 'Click me!',
    tipo: 'Primary',
    tamaño: 'Default',
    onClick: () => alert('Button clicked!'),
  },
};

