import React from "react";
import type { Team } from "@mosaic/shared";
import { Card, CardHeader, CardContent } from "@mosaic/ui";
import Link from "next/link";

interface TeamCardProps {
  team: Team;
  workspaceId: string;
}

export const TeamCard = React.memo(function TeamCard({
  team,
  workspaceId,
}: TeamCardProps): React.JSX.Element {
  return (
    <Link href={`/settings/workspaces/${workspaceId}/teams/${team.id}`}>
      <Card className="hover:shadow-lg transition-shadow cursor-pointer">
        <CardHeader>
          <h3 className="text-lg font-semibold text-gray-900">{team.name}</h3>
        </CardHeader>
        <CardContent>
          {team.description ? (
            <p className="text-sm text-gray-600">{team.description}</p>
          ) : (
            <p className="text-sm text-gray-400 italic">No description</p>
          )}
          <div className="mt-3 flex items-center gap-2 text-xs text-gray-500">
            <span>Created {new Date(team.createdAt).toLocaleDateString()}</span>
          </div>
        </CardContent>
      </Card>
    </Link>
  );
});