lti-web-client/src/components/helper/pdf/typography/PdfTypography.tsx

import { Color } from '@/types/theme';
import { Text, StyleSheet } from '@react-pdf/renderer';
import type { Style } from '@react-pdf/types';

type TypographySize = 'h1' | 'h2' | 'h3' | 'h4' | 'p' | 'small' | 'label';

type TypographyVariant = Color | 'default';

type PdfTypographyProps = {
  children: React.ReactNode;
  size?: TypographySize;
  variant?: TypographyVariant;
  color?: string;
  style?: Style;
};

const styles = StyleSheet.create({
  h1: {
    fontSize: 14,
    fontWeight: 'bold',
    marginBottom: 5,
  },
  h2: {
    fontSize: 12,
    fontWeight: 'bold',
    marginBottom: 8,
  },
  h3: {
    fontSize: 10,
    fontWeight: 'bold',
    marginBottom: 4,
  },
  h4: {
    fontSize: 9,
    fontWeight: 'bold',
    marginBottom: 3,
  },
  p: {
    fontSize: 10,
    marginBottom: 4,
  },
  small: {
    fontSize: 8,
    marginBottom: 2,
  },
  label: {
    fontSize: 9,
    marginBottom: 5,
  },
});

const variantColors: Record<TypographyVariant, string> = {
  default: '#333333',
  primary: '#1f74bf',
  secondary: '#6B7280',
  accent: '#8B5CF6',
  neutral: '#6B7280',
  info: '#3B82F6',
  success: '#065F46',
  warning: '#92400E',
  error: '#DC2626',
  none: '#333333',
};

export const PdfTypography = ({
  children,
  size = 'p',
  variant = 'default',
  color,
  style,
}: PdfTypographyProps) => {
  const sizeStyle = styles[size];
  const textColor = color || variantColors[variant];

  return (
    <Text style={[sizeStyle, { color: textColor }, ...(style ? [style] : [])]}>
      {children}
    </Text>
  );
};