import { ReactNode } from 'react';
import { Box } from './Box';
import { Text } from './Text';

export interface RaceRowCellProps {
  children: ReactNode;
  label?: string;
  width?: string | number;
  align?: 'left' | 'center' | 'right';
  hideOnMobile?: boolean;
}

export const RaceRowCell = ({ 
  children, 
  label, 
  width, 
  align = 'left',
  hideOnMobile = false
}: RaceRowCellProps) => {
  const alignmentClasses = {
    left: 'items-start text-left',
    center: 'items-center text-center',
    right: 'items-end text-right'
  }[align];

  return (
    <Box 
      display={hideOnMobile ? { base: 'none', md: 'flex' } : 'flex'}
      flexDirection="col"
      width={width}
      flexShrink={width ? 0 : 1}
      minWidth="0"
      className={alignmentClasses}
    >
      {label && (
        <Text 
          size="xs" 
          variant="low" 
          uppercase 
          weight="bold" 
          letterSpacing="widest"
          marginBottom={0.5}
        >
          {label}
        </Text>
      )}
      <Box display="flex" alignItems="center" gap={2} minWidth="0" justifyContent={align === 'right' ? 'end' : (align === 'center' ? 'center' : 'start')}>
        {children}
      </Box>
    </Box>
  );
};