'use client';

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

interface PenaltyEntry {
  driverId: string;
  driverName: string;
  type: 'time_penalty' | 'grid_penalty' | 'points_deduction' | 'disqualification' | 'warning' | 'license_points';
  value: number;
  reason: string;
  notes?: string;
}

interface RacePenaltyRowProps {
  penalty: PenaltyEntry;
}

export function RacePenaltyRow({ penalty }: RacePenaltyRowProps) {
  return (
    <Surface variant="dark" rounded="lg" padding={3}>
      <Stack direction="row" align="center" gap={3}>
        <Surface variant="muted" rounded="full" padding={1} style={{ width: '2.5rem', height: '2.5rem', backgroundColor: 'rgba(239, 68, 68, 0.2)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Text color="text-error-red" weight="bold">!</Text>
        </Surface>
        <Box style={{ flex: 1 }}>
          <Stack direction="row" align="center" gap={2} mb={1}>
            <Text weight="medium" color="text-white">{penalty.driverName}</Text>
            <Surface variant="muted" rounded="full" padding={1} style={{ backgroundColor: 'rgba(239, 68, 68, 0.2)', paddingLeft: '0.5rem', paddingRight: '0.5rem' }}>
              <Text size="xs" weight="medium" color="text-error-red" style={{ textTransform: 'capitalize' }}>
                {penalty.type.replace('_', ' ')}
              </Text>
            </Surface>
          </Stack>
          <Text size="sm" color="text-gray-400" block>{penalty.reason}</Text>
          {penalty.notes && (
            <Box mt={1}>
              <Text size="sm" color="text-gray-500" block style={{ fontStyle: 'italic' }}>{penalty.notes}</Text>
            </Box>
          )}
        </Box>
        <Box style={{ textAlign: 'right' }}>
          <Text size="2xl" weight="bold" color="text-error-red">
            {penalty.type === 'time_penalty' && `+${penalty.value}s`}
            {penalty.type === 'grid_penalty' && `+${penalty.value} grid`}
            {penalty.type === 'points_deduction' && `-${penalty.value} pts`}
            {penalty.type === 'disqualification' && 'DSQ'}
            {penalty.type === 'warning' && 'Warning'}
            {penalty.type === 'license_points' && `${penalty.value} LP`}
          </Text>
        </Box>
      </Stack>
    </Surface>
  );
}