import React, { useCallback } from 'react';
import { Organization } from '@/types';
import Badge from '@/components/ui/Badge';
import { LogIn, LogOut } from 'lucide-react';

interface Match {
  partner: Organization;
  resource: string;
}

interface MatchCardProps {
  match: Match;
  onSelectOrg: (org: Organization) => void;
  type: 'provider' | 'consumer';
}

const MatchCard: React.FC<MatchCardProps> = ({ match, onSelectOrg, type }) => {
  const icon =
    type === 'provider' ? (
      <LogOut className="h-4 h-5 text-current text-success w-4 w-5" />
    ) : (
      <LogIn className="h-4 h-5 text-current text-destructive w-4 w-5" />
    );

  const handleSelect = useCallback(() => {
    onSelectOrg(match.partner);
  }, [onSelectOrg, match.partner]);

  return (
    <div className="p-3 bg-muted/50 rounded-lg flex items-center gap-3 transition-colors hover:bg-muted">
      <div className="shrink-0">{icon}</div>
      <div className="flex-1 min-w-0">
        <Badge
          variant="outline"
          className={`capitalize ${type === 'provider' ? 'bg-success/10 text-success border-success/20' : 'bg-destructive/10 text-destructive border-destructive/20'}`}
        >
          {match.resource}
        </Badge>
        <button
          onClick={handleSelect}
          className="block font-medium text-left text-base text-foreground hover:text-primary hover:underline mt-1 w-full truncate"
        >
          {match.partner.name}
        </button>
      </div>
    </div>
  );
};

export default React.memo(MatchCard);