wip

apps/website/components/teams/TeamCard.tsx

@@ -1,126 +1,185 @@
 'use client';
 
 import Image from 'next/image';
-import Card from '../ui/Card';
+import {
+  Users,
+  Trophy,
+  Award,
+  Crown,
+  Star,
+  TrendingUp,
+  Shield,
+  ChevronRight,
+  UserPlus,
+  Zap,
+  Clock,
+} from 'lucide-react';
 import { getImageService } from '@/lib/di-container';
 
 interface TeamCardProps {
   id: string;
   name: string;
+  description?: string;
   logo?: string;
   memberCount: number;
-  leagues: string[];
   rating?: number | null;
   totalWins?: number;
   totalRaces?: number;
   performanceLevel?: 'beginner' | 'intermediate' | 'advanced' | 'pro';
+  isRecruiting?: boolean;
+  specialization?: 'endurance' | 'sprint' | 'mixed';
+  leagues?: string[];
   onClick?: () => void;
 }
 
+function getPerformanceBadge(level?: string) {
+  switch (level) {
+    case 'pro':
+      return { icon: Crown, label: 'Pro', color: 'text-yellow-400', bgColor: 'bg-yellow-500/20 border-yellow-500/30' };
+    case 'advanced':
+      return { icon: Star, label: 'Advanced', color: 'text-purple-400', bgColor: 'bg-purple-500/20 border-purple-500/30' };
+    case 'intermediate':
+      return { icon: TrendingUp, label: 'Intermediate', color: 'text-primary-blue', bgColor: 'bg-primary-blue/20 border-primary-blue/30' };
+    case 'beginner':
+      return { icon: Shield, label: 'Beginner', color: 'text-green-400', bgColor: 'bg-green-500/20 border-green-500/30' };
+    default:
+      return null;
+  }
+}
+
+function getSpecializationBadge(specialization?: string) {
+  switch (specialization) {
+    case 'endurance':
+      return { icon: Clock, label: 'Endurance', color: 'text-orange-400' };
+    case 'sprint':
+      return { icon: Zap, label: 'Sprint', color: 'text-neon-aqua' };
+    default:
+      return null;
+  }
+}
+
 export default function TeamCard({
   id,
   name,
+  description,
   logo,
   memberCount,
-  leagues,
   rating,
   totalWins,
   totalRaces,
   performanceLevel,
+  isRecruiting,
+  specialization,
   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',
-  };
+  const imageService = getImageService();
+  const logoUrl = logo || imageService.getTeamLogo(id);
+  const performanceBadge = getPerformanceBadge(performanceLevel);
+  const specializationBadge = getSpecializationBadge(specialization);
 
   return (
     <div
-      className="cursor-pointer hover:scale-[1.03] transition-transform duration-150"
+      className="group relative cursor-pointer h-full"
       onClick={onClick}
     >
-      <Card>
-        <div className="space-y-4">
+      {/* Card Container */}
+      <div className="relative h-full rounded-xl bg-iron-gray border border-charcoal-outline overflow-hidden transition-all duration-200 hover:border-purple-500/50 hover:shadow-[0_0_30px_rgba(168,85,247,0.15)] hover:bg-iron-gray/80 flex flex-col">
+        {/* Header with Logo */}
+        <div className="relative p-4 pb-0">
           <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 overflow-hidden">
+            {/* Logo */}
+            <div className="w-14 h-14 rounded-xl bg-charcoal-outline flex items-center justify-center flex-shrink-0 overflow-hidden border border-charcoal-outline">
               <Image
-                src={logo || getImageService().getTeamLogo(id)}
+                src={logoUrl}
                 alt={name}
-                width={64}
-                height={64}
+                width={56}
+                height={56}
                 className="w-full h-full object-cover"
               />
             </div>
+
+            {/* Title & Badges */}
             <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>
-              {typeof rating === 'number' && (
-                <p className="text-xs text-primary-blue mt-1">
-                  Team rating: <span className="font-semibold">{Math.round(rating)}</span>
-                </p>
+              <div className="flex items-start justify-between gap-2">
+                <h3 className="text-base font-semibold text-white truncate group-hover:text-purple-400 transition-colors">
+                  {name}
+                </h3>
+                {isRecruiting && (
+                  <span className="flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-semibold bg-performance-green/20 text-performance-green border border-performance-green/30 whitespace-nowrap">
+                    <UserPlus className="w-3 h-3" />
+                    Recruiting
+                  </span>
+                )}
+              </div>
+              
+              {/* Performance Level */}
+              {performanceBadge && (
+                <div className="mt-1.5 flex items-center gap-2">
+                  <span className={`flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-medium border ${performanceBadge.bgColor}`}>
+                    <performanceBadge.icon className={`w-3 h-3 ${performanceBadge.color}`} />
+                    <span className={performanceBadge.color}>{performanceBadge.label}</span>
+                  </span>
+                  {specializationBadge && (
+                    <span className="flex items-center gap-1 text-[10px] text-gray-500">
+                      <specializationBadge.icon className={`w-3 h-3 ${specializationBadge.color}`} />
+                      {specializationBadge.label}
+                    </span>
+                  )}
+                </div>
               )}
             </div>
           </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>
-          )}
+        {/* Content */}
+        <div className="p-4 flex flex-col flex-1">
+          {/* Description */}
+          <p className="text-xs text-gray-500 line-clamp-2 mb-4 h-8">
+            {description || 'No description available'}
+          </p>
 
-          <div className="grid grid-cols-3 gap-4 text-center">
-            <div>
-              <div className="text-sm text-gray-400">Rating</div>
-              <div className="text-lg font-semibold text-primary-blue">
-                {typeof rating === 'number' ? Math.round(rating) : '—'}
+          {/* Stats Grid */}
+          <div className="grid grid-cols-3 gap-2 mb-4">
+            <div className="text-center p-2 rounded-lg bg-charcoal-outline/30">
+              <div className="text-[10px] text-gray-500 mb-0.5">Rating</div>
+              <div className="text-sm font-semibold text-primary-blue">
+                {typeof rating === 'number' ? Math.round(rating).toLocaleString() : '—'}
               </div>
             </div>
-            <div>
-              <div className="text-sm text-gray-400">Wins</div>
-              <div className="text-lg font-semibold text-green-400">
+            <div className="text-center p-2 rounded-lg bg-charcoal-outline/30">
+              <div className="text-[10px] text-gray-500 mb-0.5">Wins</div>
+              <div className="text-sm font-semibold text-performance-green">
                 {totalWins ?? 0}
               </div>
             </div>
-            <div>
-              <div className="text-sm text-gray-400">Races</div>
-              <div className="text-lg font-semibold text-white">
+            <div className="text-center p-2 rounded-lg bg-charcoal-outline/30">
+              <div className="text-[10px] text-gray-500 mb-0.5">Races</div>
+              <div className="text-sm font-semibold text-white">
                 {totalRaces ?? 0}
               </div>
             </div>
           </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>
-              )}
+          {/* Spacer */}
+          <div className="flex-1" />
+
+          {/* Footer */}
+          <div className="flex items-center justify-between pt-3 border-t border-charcoal-outline/50 mt-auto">
+            <div className="flex items-center gap-2 text-[10px] text-gray-500">
+              <Users className="w-3 h-3" />
+              <span>
+                {memberCount} {memberCount === 1 ? 'member' : 'members'}
+              </span>
+            </div>
+            
+            {/* View Arrow */}
+            <div className="flex items-center gap-1 text-[10px] text-gray-500 group-hover:text-purple-400 transition-colors">
+              <span>View</span>
+              <ChevronRight className="w-3 h-3 transition-transform group-hover:translate-x-0.5" />
             </div>
           </div>
         </div>
-      </Card>
+      </div>
     </div>
   );
 }