import React, { ReactNode } from 'react';
import { Box } from './Box';
import { Stack } from './Stack';
import { Text } from './Text';
import { DriverIdentity } from './DriverIdentity';
import { DriverViewModel } from '@/lib/view-models/DriverViewModel';

interface TeamRosterItemProps {
  driver: DriverViewModel;
  href: string;
  roleLabel: string;
  joinedAt: string | Date;
  rating: number | null;
  overallRank: number | null;
  actions?: ReactNode;
}

export function TeamRosterItem({
  driver,
  href,
  roleLabel,
  joinedAt,
  rating,
  overallRank,
  actions,
}: TeamRosterItemProps) {
  return (
    <Box
      bg="bg-iron-gray/50"
      rounded="lg"
      border={true}
      borderColor="border-charcoal-outline"
      p={4}
    >
      <Stack direction="row" align="center" justify="between" wrap gap={4}>
        <DriverIdentity
          driver={driver}
          href={href}
          contextLabel={roleLabel}
          meta={
            <Text size="xs" color="text-gray-400">
              {driver.country} • Joined {new Date(joinedAt).toLocaleDateString()}
            </Text>
          }
          size="md"
        />

        {rating !== null && (
          <Stack direction="row" align="center" gap={6}>
            <Box display="flex" flexDirection="col" alignItems="center">
              <Text size="lg" weight="bold" color="text-primary-blue" block>
                {rating}
              </Text>
              <Text size="xs" color="text-gray-400">Rating</Text>
            </Box>
            {overallRank !== null && (
              <Box display="flex" flexDirection="col" alignItems="center">
                <Text size="sm" color="text-gray-300" block>#{overallRank}</Text>
                <Text size="xs" color="text-gray-500">Rank</Text>
              </Box>
            )}
          </Stack>
        )}

        {actions && (
          <Stack direction="row" align="center" gap={2}>
            {actions}
          </Stack>
        )}
      </Stack>
    </Box>
  );
}