import React, { ReactNode } from 'react';
import { Box } from './Box';
import { Text } from './Text';
import { Stack } from './Stack';
import { Button } from './Button';

interface JoinRequestItemProps {
  driverId: string;
  requestedAt: string | Date;
  onApprove: () => void;
  onReject: () => void;
  isApproving?: boolean;
  isRejecting?: boolean;
}

export function JoinRequestItem({
  driverId,
  requestedAt,
  onApprove,
  onReject,
  isApproving,
  isRejecting,
}: JoinRequestItemProps) {
  return (
    <Box
      display="flex"
      alignItems="center"
      justifyContent="between"
      p={4}
      rounded="lg"
      bg="bg-deep-graphite"
      border={true}
      borderColor="border-charcoal-outline"
    >
      <Stack direction="row" align="center" gap={4} flexGrow={1}>
        <Box 
          width="12" 
          height="12" 
          rounded="full" 
          bg="bg-primary-blue/20" 
          display="flex" 
          center 
          color="text-white"
          weight="bold"
          style={{ fontSize: '1.125rem' }}
        >
          {driverId.charAt(0)}
        </Box>
        <Box flexGrow={1}>
          <Text color="text-white" weight="medium" block>{driverId}</Text>
          <Text size="sm" color="text-gray-400" block>
            Requested {new Date(requestedAt).toLocaleDateString()}
          </Text>
        </Box>
      </Stack>
      <Stack direction="row" gap={2}>
        <Button
          variant="primary"
          onClick={onApprove}
          disabled={isApproving}
          size="sm"
        >
          {isApproving ? 'Approving...' : 'Approve'}
        </Button>
        <Button
          variant="danger"
          onClick={onReject}
          disabled={isRejecting}
          size="sm"
        >
          {isRejecting ? 'Rejecting...' : 'Reject'}
        </Button>
      </Stack>
    </Box>
  );
}