
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Zap, Shield, Coins, HelpCircle } from "lucide-react";
import { Signature } from "@/lib/types";

interface SignatureCardProps {
  signature: Signature;
}

export const SignatureCard = ({ signature }: SignatureCardProps) => {
  const getTypeIcon = (type: string) => {
    const lowerType = type.toLowerCase();
    if (lowerType.includes('combat')) return <Zap className="h-4 w-4" />;
    if (lowerType.includes('exploration') || lowerType.includes('relic') || lowerType.includes('data')) return <Shield className="h-4 w-4" />;
    if (lowerType.includes('ore') || lowerType.includes('gas')) return <Coins className="h-4 w-4" />;
    return <HelpCircle className="h-4 w-4" />;
  };

  const getTypeColor = (type: string) => {
    const lowerType = type.toLowerCase();
    if (lowerType.includes('combat')) return 'bg-red-900/30 text-red-300 border-red-600';
    if (lowerType.includes('exploration') || lowerType.includes('relic') || lowerType.includes('data')) return 'bg-blue-900/30 text-blue-300 border-blue-600';
    if (lowerType.includes('ore') || lowerType.includes('gas')) return 'bg-yellow-900/30 text-yellow-300 border-yellow-600';
    if (!type || type === '') return 'bg-slate-700 text-slate-300 border-slate-600';
    return 'bg-purple-900/30 text-purple-300 border-purple-600';
  };

  return (
    <Card className="bg-slate-800/40 border-slate-700 hover:bg-slate-800/60 transition-all duration-200 hover:border-slate-600">
      <CardContent className="pt-6">
        <div className="space-y-3">
          {/* Type Badge - Most Important */}
          <div className="flex items-center justify-center">
            <Badge 
              variant="outline" 
              className={`${getTypeColor(signature.type)} px-3 py-1 text-sm font-semibold flex items-center gap-2`}
            >
              {getTypeIcon(signature.type)}
              {signature.type || 'Unknown Type'}
            </Badge>
          </div>
          
          {/* Signature Name */}
          <div className="text-center">
            <h3 className="text-white font-medium text-lg">
              {signature.signame || 'Unnamed Signature'}
            </h3>
          </div>
          
          {/* Additional Info */}
          <div className="space-y-2 text-sm text-slate-400">
            <div className="flex justify-between">
              <span>System:</span>
              <span className="text-slate-200">{signature.system}</span>
            </div>
            <div className="flex justify-between">
              <span>ID:</span>
              <span className="text-slate-200 font-mono text-xs">{signature.id}</span>
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  );
};
