import type { Meta, StoryObj } from '@storybook/react';
import Button from './Button';
import { 
  ShoppingCartIcon, 
  HeartIcon, 
  ArrowRightIcon,
  PlusIcon 
} from '@heroicons/react/24/outline';

const meta: Meta<typeof Button> = {
  title: 'UI/Button',
  component: Button,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
  argTypes: {
    variant: {
      control: 'select',
      options: ['primary', 'secondary', 'outline', 'ghost', 'danger', 'success', 'warning'],
    },
    size: {
      control: 'select',
      options: ['xs', 'sm', 'md', 'lg', 'xl'],
    },
    isLoading: {
      control: 'boolean',
    },
    isFullWidth: {
      control: 'boolean',
    },
    disabled: {
      control: 'boolean',
    },
    children: {
      control: 'text',
    },
  },
};

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

export const Primary: Story = {
  args: {
    variant: 'primary',
    children: 'Botón Principal',
  },
};

export const Secondary: Story = {
  args: {
    variant: 'secondary',
    children: 'Botón Secundario',
  },
};

export const Outline: Story = {
  args: {
    variant: 'outline',
    children: 'Botón Contorno',
  },
};

export const Ghost: Story = {
  args: {
    variant: 'ghost',
    children: 'Botón Fantasma',
  },
};

export const Danger: Story = {
  args: {
    variant: 'danger',
    children: 'Eliminar',
  },
};

export const Success: Story = {
  args: {
    variant: 'success',
    children: 'Guardar',
  },
};

export const Warning: Story = {
  args: {
    variant: 'warning',
    children: 'Advertencia',
  },
};

export const Loading: Story = {
  args: {
    variant: 'primary',
    isLoading: true,
    children: 'Cargando...',
    loadingText: 'Procesando...',
  },
};

export const WithLeftIcon: Story = {
  args: {
    variant: 'primary',
    leftIcon: <ShoppingCartIcon className="w-4 h-4" />,
    children: 'Añadir al Carrito',
  },
};

export const WithRightIcon: Story = {
  args: {
    variant: 'outline',
    rightIcon: <ArrowRightIcon className="w-4 h-4" />,
    children: 'Continuar',
  },
};

export const WithBothIcons: Story = {
  args: {
    variant: 'secondary',
    leftIcon: <HeartIcon className="w-4 h-4" />,
    rightIcon: <PlusIcon className="w-4 h-4" />,
    children: 'Me Gusta',
  },
};

export const FullWidth: Story = {
  args: {
    variant: 'primary',
    isFullWidth: true,
    children: 'Botón de Ancho Completo',
  },
  parameters: {
    layout: 'padded',
  },
};

export const Disabled: Story = {
  args: {
    variant: 'primary',
    disabled: true,
    children: 'Botón Deshabilitado',
  },
};

export const Sizes: Story = {
  render: () => (
    <div className="flex flex-col gap-4 items-center">
      <Button size="xs" variant="primary">Extra Pequeño</Button>
      <Button size="sm" variant="primary">Pequeño</Button>
      <Button size="md" variant="primary">Mediano</Button>
      <Button size="lg" variant="primary">Grande</Button>
      <Button size="xl" variant="primary">Extra Grande</Button>
    </div>
  ),
};

export const Variants: Story = {
  render: () => (
    <div className="flex flex-wrap gap-2">
      <Button variant="primary">Principal</Button>
      <Button variant="secondary">Secundario</Button>
      <Button variant="outline">Contorno</Button>
      <Button variant="ghost">Fantasma</Button>
      <Button variant="danger">Peligro</Button>
      <Button variant="success">Éxito</Button>
      <Button variant="warning">Advertencia</Button>
    </div>
  ),
};