import { Link } from "wouter";
import type { ToolWithStats } from "@workspace/api-client-react";

import { Badge } from "@/components/ui/badge";
import { RatingStars } from "@/components/rating-stars";
import { MiniBars } from "@/components/mini-bars";

export function ToolPreviewCard({ tool }: { tool: ToolWithStats }) {
  return (
    <div className="space-y-3">
      <div>
        <div className="flex items-start justify-between gap-2">
          <div className="min-w-0">
            <div className="font-semibold leading-tight truncate">{tool.name}</div>
            <div className="text-xs text-muted-foreground">{tool.category}</div>
          </div>
          <RatingStars value={tool.avgCombined ?? 0} size="sm" />
        </div>
      </div>

      <p className="text-xs text-muted-foreground line-clamp-3">{tool.description}</p>

      <div className="space-y-1.5">
        <div className="flex items-center justify-between text-xs">
          <span className="text-muted-foreground">{tool.ratingCount} review{tool.ratingCount === 1 ? "" : "s"}</span>
          <span className="font-semibold tabular-nums">
            {tool.avgCombined != null ? tool.avgCombined.toFixed(1) : "–"}/5
          </span>
        </div>
        <MiniBars usefulness={tool.avgUsefulness} usability={tool.avgUsability} />
      </div>

      {tool.tags && tool.tags.length > 0 && (
        <div className="flex flex-wrap gap-1">
          {tool.tags.slice(0, 4).map((tag) => (
            <Badge key={tag} variant="secondary" className="text-[10px]">
              {tag}
            </Badge>
          ))}
          {tool.tags.length > 4 && (
            <span className="text-[10px] text-muted-foreground">+{tool.tags.length - 4}</span>
          )}
        </div>
      )}

      <Link
        href={`/tools/${tool.id}`}
        className="block w-full rounded-md border border-primary/40 bg-primary/5 px-3 py-1.5 text-center text-xs font-medium text-primary hover:bg-primary/10"
      >
        View details
      </Link>
    </div>
  );
}