import { ReactNode } from 'react';
import { getArabicTextClasses, defaultLayoutConfig, type LayoutConfig } from '~/lib/layout-utils';

interface TextProps {
  children: ReactNode;
  className?: string;
  config?: Partial<LayoutConfig>;
  size?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
  weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold';
  color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'muted';
  align?: 'left' | 'center' | 'right' | 'justify';
  as?: 'p' | 'span' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
}

export function Text({ 
  children, 
  className = '', 
  config = {},
  size = 'base',
  weight = 'normal',
  color = 'primary',
  align,
  as: Component = 'p'
}: TextProps) {
  const layoutConfig = { ...defaultLayoutConfig, ...config };
  
  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 = {
    light: 'font-light',
    normal: 'font-normal',
    medium: 'font-medium',
    semibold: 'font-semibold',
    bold: 'font-bold',
  };
  
  const colorClasses = {
    primary: 'text-gray-900 dark:text-gray-100',
    secondary: 'text-gray-600 dark:text-gray-400',
    success: 'text-green-600 dark:text-green-400',
    warning: 'text-amber-600 dark:text-amber-400',
    error: 'text-red-600 dark:text-red-400',
    muted: 'text-gray-500 dark:text-gray-500',
  };
  
  const alignClasses = {
    left: layoutConfig.direction === 'rtl' ? 'text-right' : 'text-left',
    center: 'text-center',
    right: layoutConfig.direction === 'rtl' ? 'text-left' : 'text-right',
    justify: 'text-justify',
  };
  
  const alignClass = align ? alignClasses[align] : (layoutConfig.direction === 'rtl' ? 'text-right' : 'text-left');
  const arabicClasses = getArabicTextClasses(size as any);
  
  return (
    <Component 
      className={`${arabicClasses} ${sizeClasses[size]} ${weightClasses[weight]} ${colorClasses[color]} ${alignClass} ${className}`}
      dir={layoutConfig.direction}
    >
      {children}
    </Component>
  );
}