import type { ElementType } from 'react';

interface TypographyProps {
  variant: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body1' | 'body2' | 'caption';
  children: React.ReactNode;
  className?: string;
  color?: string;  // Add color prop
}

const Typography: React.FC<TypographyProps> = ({ variant, children, className = '', color }) => {
  const variantStyles: Record<string, React.CSSProperties> = {
    h1: { fontSize: '2.5rem', fontWeight: 'bold' },
    h2: { fontSize: '2rem', fontWeight: 'bold' },
    h3: { fontSize: '1.75rem', fontWeight: 'bold' },
    h4: { fontSize: '1.5rem', fontWeight: 'bold' },
    h5: { fontSize: '1.25rem', fontWeight: 'bold' },
    h6: { fontSize: '1rem', fontWeight: 'bold' },
    body1: { fontSize: '1rem', fontWeight: 'normal' },
    body2: { fontSize: '0.875rem', fontWeight: 'normal' },
    caption: { fontSize: '0.75rem', fontWeight: 'normal' },
  };

  const combinedStyle = { ...variantStyles[variant], ...(color && { color }), ...(className ? { className } : {}) };

  const variantToTag: Record<string, ElementType> = {
    h1: 'h1',
    h2: 'h2',
    h3: 'h3',
    h4: 'h4',
    h5: 'h5',
    h6: 'h6',
    body1: 'p',
    body2: 'p',
    caption: 'span',
  };

  const Tag: ElementType = variantToTag[variant];

  return <Tag style={combinedStyle}>{children}</Tag>;
};

export default Typography;