import { Badge } from '@/ui/Badge';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Surface } from '@/ui/Surface';
import { Text } from '@/ui/Text';

interface PenaltyRowProps {
  driverName: string;
  type: string;
  reason: string;
  notes?: string;
  value: string | number;
  valueLabel?: string;
}

export function PenaltyRow({
  driverName,
  type,
  reason,
  notes,
  value,
  valueLabel,
}: PenaltyRowProps) {
  return (
    <Surface variant="dark" rounded="lg" p={3} border borderColor="border-charcoal-outline/50">
      <Stack direction="row" align="center" gap={3}>
        <Box 
          display="flex" 
          h="10" 
          w="10" 
          alignItems="center" 
          justifyContent="center" 
          rounded="full" 
          bg="bg-red-600/20"
        >
          <Text color="text-red-500" weight="bold">!</Text>
        </Box>
        <Box flexGrow={1}>
          <Stack direction="row" align="center" gap={2} mb={1}>
            <Text weight="medium" color="text-white">{driverName}</Text>
            <Badge variant="danger">
              {type.replace('_', ' ')}
            </Badge>
          </Stack>
          <Text size="sm" color="text-gray-400" block>{reason}</Text>
          {notes && (
            <Text size="sm" color="text-gray-500" block mt={1} italic>
              {notes}
            </Text>
          )}
        </Box>
        <Box textAlign="right">
          <Text size="2xl" weight="bold" color="text-red-500">
            {value} {valueLabel}
          </Text>
        </Box>
      </Stack>
    </Surface>
  );
}