import React from 'react';
import MuiTypography from '@mui/material/Typography';
import type { TypographyProps as MuiTypographyProps } from '@mui/material/Typography';

// ─── Types ───────────────────────────────────────────────────────────────────

/** Props for the FA Typography component */
export interface TypographyProps extends MuiTypographyProps {
  /** Truncate text with ellipsis after this many lines (CSS line-clamp) */
  maxLines?: number;
}

// ─── Component ───────────────────────────────────────────────────────────────

/**
 * Text display component for the FA design system.
 *
 * Wraps MUI Typography with FA brand fonts and type scale. All variant
 * styles (sizes, weights, line heights) come from the MUI theme which
 * maps to our design tokens.
 *
 * Variant guide (21 variants across 6 categories):
 *
 * Display (Noto Serif SC, Regular 400):
 * - `displayHero` 80px, `display1` 64px, `display2` 52px, `display3` 40px, `displaySm` 32px
 *
 * Headings (Montserrat, Bold 700):
 * - `h1` 36px, `h2` 30px, `h3` 24px, `h4` 20px, `h5` 18px, `h6` 16px
 *
 * Body (Montserrat, Medium 500):
 * - `bodyLg` 18px, `body1` 16px, `body2` 14px, `bodyXs` 12px
 *
 * Label (Montserrat, Medium 500):
 * - `labelLg` 16px, `label` 14px, `labelSm` 12px
 *
 * Caption (Montserrat, Regular 400):
 * - `caption` 12px, `captionSm` 11px
 *
 * Overline (Montserrat, SemiBold 600, uppercase):
 * - `overline` 12px, `overlineSm` 11px
 */
export const Typography = React.forwardRef<HTMLElement, TypographyProps>(
  ({ maxLines, sx, ...props }, ref) => {
    return (
      <MuiTypography
        ref={ref}
        sx={[
          maxLines != null && {
            display: '-webkit-box',
            WebkitLineClamp: maxLines,
            WebkitBoxOrient: 'vertical',
            overflow: 'hidden',
          },
          ...(Array.isArray(sx) ? sx : [sx]),
        ]}
        {...props}
      />
    );
  },
);

Typography.displayName = 'Typography';
export default Typography;
