'use client';

import Link from 'next/link';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui';
import { Badge } from '@/components/ui';
import type { Team } from '@/lib/types';

interface TeamCardProps {
  team: Team & { userRole?: string; userOkrCount?: number; _count?: { members: number } };
}

export function TeamCard({ team }: TeamCardProps) {
  const memberCount = team._count?.members || team.members?.length || 0;
  const okrCount = team.userOkrCount || 0;
  const isAdmin = team.userRole === 'ADMIN';

  return (
    <Link href={`/teams/${team.id}`}>
      <Card hover className="h-full">
        <CardHeader>
          <div className="flex items-start justify-between">
            <div className="flex-1">
              <div className="flex items-center gap-2">
                <span className="text-2xl">👥</span>
                <CardTitle>{team.name}</CardTitle>
              </div>
              {team.description && <CardDescription className="mt-2">{team.description}</CardDescription>}
            </div>
            {isAdmin && (
              <Badge
                style={{
                  backgroundColor: 'color-mix(in srgb, var(--purple) 15%, transparent)',
                  color: 'var(--purple)',
                }}
              >
                Admin
              </Badge>
            )}
          </div>
        </CardHeader>
        <CardContent>
          <div className="flex items-center gap-4 text-sm text-muted">
            <div className="flex items-center gap-1.5">
              <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"
                />
              </svg>
              <span>{memberCount} membre{memberCount !== 1 ? 's' : ''}</span>
            </div>
            <div className="flex items-center gap-1.5">
              <span className="text-lg">🎯</span>
              <span>{okrCount} OKR{okrCount !== 1 ? 's' : ''}</span>
            </div>
          </div>
        </CardContent>
      </Card>
    </Link>
  );
}