'use client';

import { Badge } from '@/ui/Badge';
import { Icon } from '@/ui/Icon';
import { Stack } from '@/ui/Stack';
import { Surface } from '@/ui/Surface';
import { Text } from '@/ui/Text';
import { AlertCircle, CheckCircle, XCircle } from 'lucide-react';

interface SponsorshipRequest {
  id: string;
  sponsorName: string;
  status: 'pending' | 'approved' | 'rejected';
  statusLabel: string;
  formattedRequestedAt: string;
  slotName: string;
}

interface SponsorshipRequestCardProps {
  request: SponsorshipRequest;
}

export function SponsorshipRequestCard({ request }: SponsorshipRequestCardProps) {
  const statusVariant = {
    pending: 'warning' as const,
    approved: 'success' as const,
    rejected: 'danger' as const,
  }[request.status];

  const statusIcon = {
    pending: AlertCircle,
    approved: CheckCircle,
    rejected: XCircle,
  }[request.status];

  const statusColor = {
    pending: '#f59e0b',
    approved: '#10b981',
    rejected: '#ef4444',
  }[request.status];

  return (
    <Surface
      variant="muted"
      rounded="lg"
      border
      padding={4}
      // eslint-disable-next-line gridpilot-rules/component-classification
      style={{ 
        backgroundColor: `${statusColor}0D`,
        borderColor: statusColor
      }}
    >
      <Stack direction="row" align="start" justify="between">
        {/* eslint-disable-next-line gridpilot-rules/component-classification */}
        <Stack style={{ flex: 1, minWidth: 0 }}>
          <Stack direction="row" align="center" gap={3} mb={2}>
            <Icon icon={statusIcon} size={5} color={statusColor} />
            <Text weight="semibold" color="text-white">{request.sponsorName}</Text>
            <Badge variant={statusVariant}>
              {request.statusLabel}
            </Badge>
          </Stack>

          <Text size="sm" color="text-gray-300" block mb={2}>
            Requested: {request.slotName}
          </Text>

          <Text size="xs" color="text-gray-400" block>
            {request.formattedRequestedAt}
          </Text>
        </Stack>
      </Stack>
    </Surface>
  );
}