tool-evaluator/artifacts/toolrate/src/components/tool-card.tsx

import { ToolWithStats } from "@workspace/api-client-react";
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Star, MessageSquare, Wrench, Scale, Bookmark } from "lucide-react";
import { Link } from "wouter";
import { MiniBars } from "@/components/mini-bars";
import { cn } from "@/lib/utils";

export function ToolCard({
  tool,
  compare,
  watchlist,
}: {
  tool: ToolWithStats;
  compare?: { selected: boolean; onToggle: () => void };
  watchlist?: { watched: boolean; onToggle: () => void };
}) {
  return (
    <Card className="hover-elevate transition-all flex flex-col h-full cursor-pointer hover:border-primary/50 hover:neon-glow-primary">
      <Link href={`/tools/${tool.id}`} className="flex flex-col h-full p-0 m-0">
        <CardHeader className="pb-3">
          <div className="flex items-start gap-3 mb-2">
            <div className="shrink-0 w-9 h-9 rounded-md border bg-muted flex items-center justify-center overflow-hidden">
              {tool.iconUrl ? (
                <img
                  src={tool.iconUrl}
                  alt={tool.name}
                  className="w-full h-full object-contain p-0.5"
                  onError={(e) => { (e.target as HTMLImageElement).style.display = "none"; }}
                />
              ) : (
                <Wrench className="w-4 h-4 text-muted-foreground" />
              )}
            </div>
            <div className="flex-1 min-w-0">
              <div className="flex flex-wrap justify-between items-start gap-x-2 gap-y-1">
                <CardTitle className="text-base truncate min-w-[30%]">{tool.name}</CardTitle>
                <Badge variant="outline" className="shrink-0 text-xs">{tool.category}</Badge>
              </div>
            </div>
          </div>
          <CardDescription className="line-clamp-2 min-h-[2.5rem]">
            {tool.description}
          </CardDescription>
        </CardHeader>
        <CardContent className="flex-1 pb-4">
          <div className="flex flex-wrap gap-1">
            {tool.tags?.slice(0, 3).map((tag) => (
              <Badge key={tag} variant="secondary" className="text-xs px-1.5 py-0">
                {tag}
              </Badge>
            ))}
            {(tool.tags?.length || 0) > 3 && (
              <Badge variant="secondary" className="text-xs px-1.5 py-0 text-muted-foreground">
                +{(tool.tags?.length || 0) - 3}
              </Badge>
            )}
          </div>
        </CardContent>
        <CardFooter className="pt-0 flex flex-col gap-3 border-t p-4 mt-auto">
          <div className="flex items-center justify-between text-sm text-muted-foreground">
            <div className="flex items-center gap-4">
              <div className="flex items-center gap-1">
                <Star className="w-4 h-4 fill-primary text-primary" />
                <span className="font-medium text-foreground">
                  {tool.avgCombined ? tool.avgCombined.toFixed(1) : "N/A"}
                </span>
              </div>
              <div className="flex items-center gap-1">
                <MessageSquare className="w-4 h-4" />
                <span>{tool.ratingCount}</span>
              </div>
            </div>
          </div>
          <div className={cn("items-center gap-3", (compare || watchlist) ? "flex" : "")}>
            <MiniBars usefulness={tool.avgUsefulness} usability={tool.avgUsability} className={(compare || watchlist) ? "flex-1" : undefined} />
            {watchlist && (
              <button
                type="button"
                onClick={(e) => {
                  e.preventDefault();
                  e.stopPropagation();
                  watchlist.onToggle();
                }}
                title={watchlist.watched ? "Remove from watchlist" : "Add to watchlist"}
                className={cn(
                  "shrink-0 w-8 h-8 rounded-md border flex items-center justify-center transition-colors",
                  watchlist.watched
                    ? "bg-primary text-primary-foreground border-primary"
                    : "text-muted-foreground hover:bg-muted hover:text-foreground",
                )}
              >
                <Bookmark className={cn("w-4 h-4", watchlist.watched && "fill-current")} />
              </button>
            )}
            {compare && (
              <button
                type="button"
                onClick={(e) => {
                  e.preventDefault();
                  e.stopPropagation();
                  compare.onToggle();
                }}
                title={compare.selected ? "Remove from compare" : "Add to compare"}
                className={cn(
                  "shrink-0 w-8 h-8 rounded-md border flex items-center justify-center transition-colors",
                  compare.selected
                    ? "bg-primary text-primary-foreground border-primary"
                    : "text-muted-foreground hover:bg-muted hover:text-foreground",
                )}
              >
                <Scale className="w-4 h-4" />
              </button>
            )}
          </div>
        </CardFooter>
      </Link>
    </Card>
  );
}