import React, { ReactNode } from 'react';

interface TextProps {
  children: ReactNode;
  className?: string;
  size?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
  weight?: 'normal' | 'medium' | 'semibold' | 'bold';
  color?: string;
  font?: 'mono' | 'sans';
  align?: 'left' | 'center' | 'right';
  truncate?: boolean;
}

export function Text({ 
  children, 
  className = '', 
  size = 'base',
  weight = 'normal',
  color = '',
  font = 'sans',
  align = 'left',
  truncate = false
}: TextProps) {
  const sizeClasses = {
    xs: 'text-xs',
    sm: 'text-sm',
    base: 'text-base',
    lg: 'text-lg',
    xl: 'text-xl',
    '2xl': 'text-2xl',
    '3xl': 'text-3xl',
    '4xl': 'text-4xl'
  };
  
  const weightClasses = {
    normal: 'font-normal',
    medium: 'font-medium',
    semibold: 'font-semibold',
    bold: 'font-bold'
  };
  
  const fontClasses = {
    mono: 'font-mono',
    sans: 'font-sans'
  };
  
  const alignClasses = {
    left: 'text-left',
    center: 'text-center',
    right: 'text-right'
  };
  
  const classes = [
    sizeClasses[size],
    weightClasses[weight],
    fontClasses[font],
    alignClasses[align],
    color,
    truncate ? 'truncate' : '',
    className
  ].filter(Boolean).join(' ');
  
  return <span className={classes}>{children}</span>;
}