import { Typography } from './Typography';

export default {
  title: 'Atoms/Typography',
  component: Typography,
  tags: ['autodocs'],
  argTypes: {
    variant: {
      control: 'select',
      options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'body-lg', 'body-md', 'body-sm', 'body1', 'body2', 'caption', 'overline', 'mono', 'mono-lg', 'mono-md', 'mono-sm'],
    },
    weight: {
      control: 'select',
      options: ['light', 'regular', 'medium', 'semibold', 'bold'],
    },
    color: {
      control: 'select',
      options: ['black', 'white', 'gray-900', 'gray-700', 'gray-600', 'gray-500', 'gray-400', 'red-600', 'red-500', 'blue-600', 'green-600', 'green-100', 'brand', 'main', 'teal'],
      description: 'Color del texto usando clases genéricas predefinidas',
    },
  },
};

// Ejemplos usando el componente Typography
export const Heading1 = {
  args: {
    variant: 'h1',
    children: 'Heading 1 - IBM Plex Sans 40/60 Bold',
  },
};

export const Heading2 = {
  args: {
    variant: 'h2',
    children: 'Heading 2 - IBM Plex Sans 36/54 Bold',
  },
};

export const Heading3 = {
  args: {
    variant: 'h3',
    children: 'Heading 3 - IBM Plex Sans 32/48 Semi Bold',
  },
};

export const Heading4 = {
  args: {
    variant: 'h4',
    children: 'Heading 4 - IBM Plex Sans 28/42 Semi Bold',
  },
};

export const Heading5 = {
  args: {
    variant: 'h5',
    children: 'Heading 5 - IBM Plex Sans 24/36 Medium',
  },
};

export const Heading6 = {
  args: {
    variant: 'h6',
    children: 'Heading 6 - IBM Plex Sans 20/30 Medium',
  },
};

export const BodyLarge = {
  args: {
    variant: 'body-lg',
    children: 'Body Large - IBM Plex Sans 16/24 Regular. Este es un texto de ejemplo que muestra el estilo body-lg.',
  },
};

export const BodyMedium = {
  args: {
    variant: 'body-md',
    children: 'Body Medium - IBM Plex Sans 14/21 Regular (-1%). Este es un texto de ejemplo que muestra el estilo body-md con letter-spacing ajustado.',
  },
};

export const BodySmall = {
  args: {
    variant: 'body-sm',
    children: 'Body Small - IBM Plex Sans 12/18 Regular (-2%). Este es un texto pequeño con letter-spacing ajustado.',
  },
};

export const Body1 = {
  args: {
    variant: 'body1',
    children: 'Body 1 (Alias de body-lg) - IBM Plex Sans 16/24 Regular',
  },
};

export const Body2 = {
  args: {
    variant: 'body2',
    children: 'Body 2 (Alias de body-md) - IBM Plex Sans 14/21 Regular',
  },
};

export const Caption = {
  args: {
    variant: 'caption',
    children: 'Caption - IBM Plex Sans 12/18 con color gris',
  },
};

export const Overline = {
  args: {
    variant: 'overline',
    children: 'OVERLINE TEXT',
  },
};

export const MonoLarge = {
  args: {
    variant: 'mono-lg',
    children: 'Mono Large - IBM Plex Mono 16/24 Regular. Código: const x = 42;',
  },
};

export const MonoMedium = {
  args: {
    variant: 'mono-md',
    children: 'Mono Medium - IBM Plex Mono 14/21 Regular. Código: function test() {}',
  },
};

export const MonoSmall = {
  args: {
    variant: 'mono-sm',
    children: 'Mono Small - IBM Plex Mono 12/18 Regular. Código: let y = 10;',
  },
};

export const Mono = {
  args: {
    variant: 'mono',
    children: 'Mono (default, alias de mono-md) - IBM Plex Mono 14/21 Regular',
  },
};

// Ejemplos con clases genéricas directamente (sin componente)
export const ClasesGenericasHeadings = () => (
  <div className="space-y-4">
    <h1 className="text-h1">Clase text-h1 - 40px/60px Bold</h1>
    <h2 className="text-h2">Clase text-h2 - 36px/54px Bold</h2>
    <h3 className="text-h3">Clase text-h3 - 32px/48px Semi Bold</h3>
    <h4 className="text-h4">Clase text-h4 - 28px/42px Semi Bold</h4>
    <h5 className="text-h5">Clase text-h5 - 24px/36px Medium</h5>
    <h6 className="text-h6">Clase text-h6 - 20px/30px Medium</h6>
  </div>
);

export const ClasesGenericasBody = () => (
  <div className="space-y-4">
    <p className="text-body-lg">Clase text-body-lg - 16px/24px Regular</p>
    <p className="text-body-md">Clase text-body-md - 14px/21px Regular (-1%)</p>
    <p className="text-body-sm">Clase text-body-sm - 12px/18px Regular (-2%)</p>
  </div>
);

export const ClasesGenericasMono = () => (
  <div className="space-y-4">
    <p className="text-mono-lg">Clase text-mono-lg - IBM Plex Mono 16/24 Regular</p>
    <p className="text-mono-md">Clase text-mono-md - IBM Plex Mono 14/21 Regular</p>
    <p className="text-mono-sm">Clase text-mono-sm - IBM Plex Mono 12/18 Regular</p>
  </div>
);

export const ClasesDeColores = () => (
  <div className="space-y-3 bg-gray-50 p-6 rounded-lg">
    <p className="text-body-lg color-black">Color black - color-black</p>
    <p className="text-body-lg color-gray-900">Color gray 900 - color-gray-900</p>
    <p className="text-body-lg color-gray-700">Color gray 700 - color-gray-700</p>
    <p className="text-body-lg color-gray-600">Color gray 600 - color-gray-600</p>
    <p className="text-body-lg color-gray-500">Color gray 500 - color-gray-500</p>
    <p className="text-body-lg color-red-600">Color red 600 - color-red-600</p>
    <p className="text-body-lg color-blue-600">Color blue 600 - color-blue-600</p>
    <p className="text-body-lg color-green-600">Color green 600 - color-green-600</p>
    <p className="text-body-lg bg-gray-900 color-white p-2 rounded">Color white - color-white (con fondo oscuro)</p>
  </div>
);

export const NumerosConPlexMono = () => (
  <div className="space-y-4">
    <p className="text-body-lg">Números con fuente IBM Plex Mono:</p>
    <p className="text-body-lg font-numbers text-2xl">1234567890</p>
    <p className="text-body-lg text-numbers text-2xl color-blue-600">9876543210</p>
    <p className="text-body-lg">
      Precio: <span className="font-numbers color-green-600 font-bold">$1,234.56</span>
    </p>
    <p className="text-body-lg">
      Código: <span className="text-numbers color-gray-600">ABC-123-XYZ</span>
    </p>
  </div>
);

export const PesosPermitidos = () => (
  <div className="space-y-3">
    <p className="text-body-lg font-light">Font Light (300)</p>
    <p className="text-body-lg font-regular">Font Regular (400)</p>
    <p className="text-body-lg font-medium">Font Medium (500)</p>
    <p className="text-body-lg font-semibold">Font Semi Bold (600)</p>
    <p className="text-body-lg font-bold">Font Bold (700)</p>
  </div>
);

export const EjemplosCombinados = () => (
  <div className="space-y-6 p-6">
    <div>
      <h1 className="text-h1 color-black">Título Principal</h1>
      <p className="text-body-lg color-gray-600 mt-2">Subtítulo o descripción con color gris</p>
    </div>
    
    <div className="border-t pt-4">
      <h2 className="text-h3 color-gray-900 font-bold">Sección Importante</h2>
      <p className="text-body-md color-gray-700 mt-2">
        Este es un ejemplo de texto body-md combinado con colores. 
        Puedes usar múltiples clases genéricas juntas.
      </p>
    </div>
    
    <div className="border-t pt-4">
      <h3 className="text-h5 color-blue-600">Con Color Personalizado</h3>
      <p className="text-body-sm color-gray-500 mt-1">
        Texto pequeño con estilo personalizado.
      </p>
    </div>
    
    <div className="border-t pt-4 bg-gray-50 p-4 rounded">
      <p className="text-body-lg font-semibold color-black">Ejemplo con peso Semi Bold:</p>
      <p className="text-body-md color-gray-600 mt-2">
        Número de teléfono: <span className="text-numbers color-blue-600 font-medium">+54 11 1234-5678</span>
      </p>
    </div>
  </div>
);

export const ConPropColor = () => (
  <div className="space-y-4 p-6">
    <Typography variant="h1" color="black">
      H1 con color black (prop)
    </Typography>
    <Typography variant="h2" color="gray-700">
      H2 con color gray-700 (prop)
    </Typography>
    <Typography variant="h3" color="blue-600">
      H3 con color blue-600 (prop)
    </Typography>
    <Typography variant="body-lg" color="gray-600">
      Body Large con color gray-600 usando el prop color
    </Typography>
    <Typography variant="body-md" color="red-600">
      Body Medium con color red-600 usando el prop color
    </Typography>
    <div className="bg-gray-900 p-4 rounded mt-4">
      <Typography variant="h4" color="white">
        H4 con color white sobre fondo oscuro
      </Typography>
    </div>
  </div>
);

export const ColorConClassName = () => (
  <div className="space-y-4 p-6">
    <Typography variant="h1" className="color-black">
      H1 con color usando className
    </Typography>
    <Typography variant="body-lg" className="color-blue-600">
      Body con color blue usando className
    </Typography>
    <Typography variant="body-md" className="color-red-600">
      También puedes combinar: <span className="color-green-600">colores diferentes</span> dentro del mismo componente
    </Typography>
  </div>
);

export const ComparacionAntesDespues = () => (
  <div className="space-y-8 p-6">
    <div>
      <h3 className="text-h4 color-gray-900 mb-4">Antes (con Tailwind directo):</h3>
      <p className="text-2xl font-bold text-gray-900">Texto con clases Tailwind</p>
    </div>
    
    <div>
      <h3 className="text-h4 color-gray-900 mb-4">Ahora (con clases genéricas):</h3>
      <p className="text-h3 color-black">Texto con clases genéricas</p>
      <p className="text-body-lg color-gray-600 mt-2">
        Ahora puedes usar: <code className="bg-gray-100 px-2 py-1 rounded">text-h3 color-black</code>
      </p>
    </div>

    <div>
      <h3 className="text-h4 color-gray-900 mb-4">O usando el prop color:</h3>
      <Typography variant="h3" color="black">
        Typography con prop color="black"
      </Typography>
    </div>
  </div>
);

