'use client';

import Card from '../ui/Card';

interface TeamCardProps {
  id: string;
  name: string;
  logo?: string;
  memberCount: number;
  leagues: string[];
  performanceLevel?: 'beginner' | 'intermediate' | 'advanced' | 'pro';
  onClick?: () => void;
}

export default function TeamCard({
  id,
  name,
  logo,
  memberCount,
  leagues,
  performanceLevel,
  onClick,
}: TeamCardProps) {
  const performanceBadgeColors = {
    beginner: 'bg-green-500/20 text-green-400',
    intermediate: 'bg-blue-500/20 text-blue-400',
    advanced: 'bg-purple-500/20 text-purple-400',
    pro: 'bg-red-500/20 text-red-400',
  };

  return (
    <div
      className="cursor-pointer hover:scale-[1.03] transition-transform duration-150"
      onClick={onClick}
    >
      <Card>
        <div className="space-y-4">
          <div className="flex items-start gap-4">
            <div className="w-16 h-16 bg-charcoal-outline rounded-lg flex items-center justify-center flex-shrink-0">
              {logo ? (
                <img src={logo} alt={name} className="w-full h-full object-cover rounded-lg" />
              ) : (
                <span className="text-2xl font-bold text-gray-500">
                  {name.charAt(0)}
                </span>
              )}
            </div>
            <div className="flex-1 min-w-0">
              <h3 className="text-lg font-semibold text-white truncate">
                {name}
              </h3>
              <p className="text-sm text-gray-400">
                {memberCount} {memberCount === 1 ? 'member' : 'members'}
              </p>
            </div>
          </div>

          {performanceLevel && (
            <div>
              <span
                className={`inline-block px-3 py-1 rounded-full text-xs font-medium ${
                  performanceBadgeColors[performanceLevel]
                }`}
              >
                {performanceLevel.charAt(0).toUpperCase() + performanceLevel.slice(1)}
              </span>
            </div>
          )}

          <div className="space-y-2">
            <p className="text-sm font-medium text-gray-400">Active in:</p>
            <div className="flex flex-wrap gap-2">
              {leagues.slice(0, 3).map((league, idx) => (
                <span
                  key={idx}
                  className="inline-block px-2 py-1 bg-charcoal-outline text-gray-300 rounded text-xs"
                >
                  {league}
                </span>
              ))}
              {leagues.length > 3 && (
                <span className="inline-block px-2 py-1 bg-charcoal-outline text-gray-400 rounded text-xs">
                  +{leagues.length - 3} more
                </span>
              )}
            </div>
          </div>
        </div>
      </Card>
    </div>
  );
}