import { FONT_FAMILY_SANS, FONT_FAMILY_MONO } from '../../designTokens';

export default {
  title: 'Foundations/LetraBase',
  tags: ['autodocs'],
  parameters: {
    description: 'Letra base del design system. Usar el token FONT_FAMILY_SANS en todos los componentes que requieran la fuente principal.',
  },
};

/**
 * Letra base: IBM Plex Sans.
 * Token: FONT_FAMILY_SANS (importar desde designTokens.js).
 * Se usa en títulos, body, labels, botones y toda la UI principal.
 */
export const LetraBaseSans = () => (
  <div style={{ fontFamily: FONT_FAMILY_SANS }}>
    <p style={{ fontSize: '14px', color: '#666', marginBottom: 8 }}>
      Token: <code style={{ background: '#f0f0f0', padding: '2px 6px', borderRadius: 4 }}>FONT_FAMILY_SANS</code>
    </p>
    <p style={{ fontSize: '24px', fontWeight: 600, marginBottom: 8 }}>IBM Plex Sans</p>
    <p style={{ fontSize: '16px', lineHeight: 1.5 }}>
      Esta es la letra base del sistema. Se utiliza en encabezados, párrafos, etiquetas, botones y en todos los componentes de la interfaz. Importar desde <code>designTokens.js</code> y usar <code>fontFamily: FONT_FAMILY_SANS</code> en estilos.
    </p>
    <p style={{ fontSize: '14px', color: 'var(--color-main-800)', marginTop: 16 }}>
      Ejemplo en body-md: The quick brown fox jumps over the lazy dog. 0123456789
    </p>
  </div>
);

/**
 * Fuente mono: IBM Plex Mono.
 * Token: FONT_FAMILY_MONO. Para código, IDs, números.
 */
export const LetraMono = () => (
  <div style={{ fontFamily: FONT_FAMILY_MONO }}>
    <p style={{ fontSize: '14px', color: '#666', marginBottom: 8 }}>
      Token: <code style={{ background: '#f0f0f0', padding: '2px 6px', borderRadius: 4 }}>FONT_FAMILY_MONO</code>
    </p>
    <p style={{ fontSize: '16px', marginBottom: 8 }}>IBM Plex Mono</p>
    <p style={{ fontSize: '14px', lineHeight: 1.6 }}>
      Usada para código, identificadores, números y contenido monoespaciado. const x = 42; ncl_corp_002394_prod
    </p>
  </div>
);

export const UsoDelToken = () => (
  <div style={{ fontFamily: FONT_FAMILY_SANS, padding: 16, border: '1px solid #eee', borderRadius: 8 }}>
    <pre style={{ margin: 0, fontSize: 12, color: '#333', whiteSpace: 'pre-wrap' }}>
{`import { FONT_FAMILY_SANS } from '../designTokens';

// En estilos del componente:
style={{ fontFamily: FONT_FAMILY_SANS, fontSize: 16, color: 'var(--color-main-800)' }}
`}
    </pre>
  </div>
);
