'use client';

import { Icon } from '@/ui/Icon';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import {
    AlertTriangle,
    Check,
    Clock,
    ThumbsDown,
    ThumbsUp,
    XCircle
} from 'lucide-react';

export type SponsorStatus = 'active' | 'pending' | 'approved' | 'declined' | 'expired' | 'warning';

interface SponsorStatusChipProps {
  status: SponsorStatus;
  label?: string;
}

const STATUS_CONFIG = {
  active: { icon: Check, color: 'text-performance-green', bgColor: 'bg-performance-green/10', label: 'Active' },
  pending: { icon: Clock, color: 'text-warning-amber', bgColor: 'bg-warning-amber/10', label: 'Pending' },
  approved: { icon: ThumbsUp, color: 'text-primary-blue', bgColor: 'bg-primary-blue/10', label: 'Approved' },
  declined: { icon: ThumbsDown, color: 'text-racing-red', bgColor: 'bg-racing-red/10', label: 'Declined' },
  expired: { icon: XCircle, color: 'text-gray-400', bgColor: 'bg-gray-400/10', label: 'Expired' },
  warning: { icon: AlertTriangle, color: 'text-warning-amber', bgColor: 'bg-warning-amber/10', label: 'Action Required' },
};

/**
 * SponsorStatusChip
 * 
 * Semantic status indicator for sponsorship states.
 * Follows the "Precision Racing Minimal" theme with instrument-grade feedback.
 */
export function SponsorStatusChip({ status, label }: SponsorStatusChipProps) {
  const config = STATUS_CONFIG[status];
  
  return (
    <Stack 
      px={2.5} 
      py={1} 
      rounded="full" 
      bg={config.bgColor as string} 
      border 
      borderColor="border-charcoal-outline/30"
      display="inline-block"
    >
      <Stack direction="row" align="center" gap={1.5}>
        <Icon icon={config.icon} size={3} color={config.color as string} />
        <Text 
          size="xs" 
          weight="bold" 
          color={config.color as string} 
          uppercase 
          letterSpacing="wider"
        >
          {label || config.label}
        </Text>
      </Stack>
    </Stack>
  );
}