// Pieces shared by the product pages.
import Link from "next/link";
import { Tag } from "@/components/status";
import { Card, CardContent } from "@/components/ui/card";
import type { ProductSummary } from "@/lib/api";

export function RatingTag({ rating }: { rating: string }) {
  return rating === "adult" ? <Tag tone="adult">Adult</Tag> : null;
}

/** 1536 → "1.5 KB". */
export function formatSize(bytes: number): string {
  if (bytes < 1024) return `${bytes} B`;
  const units = ["KB", "MB", "GB"];
  let n = bytes / 1024;
  let i = 0;
  while (n >= 1024 && i < units.length - 1) {
    n /= 1024;
    i++;
  }
  return `${n < 10 ? n.toFixed(1) : Math.round(n)} ${units[i]}`;
}

export function ProductCard({
  product,
  children,
}: {
  product: Pick<ProductSummary, "id" | "name" | "creator" | "rating" | "latest">;
  children?: React.ReactNode;
}) {
  return (
    <Card className="h-full">
      <CardContent className="space-y-2">
        <div className="flex items-start justify-between gap-2">
          <Link href={`/products/${product.id}`} className="font-medium underline-offset-4 hover:underline">
            {product.name}
          </Link>
          <RatingTag rating={product.rating} />
        </div>
        <p className="text-xs text-muted-foreground">
          {[product.creator && `by ${product.creator}`, `revision ${product.latest}`].filter(Boolean).join(" · ")}
        </p>
        {children}
      </CardContent>
    </Card>
  );
}

export function Empty({ children }: { children: React.ReactNode }) {
  return (
    <Card>
      <CardContent>
        <p className="py-6 text-sm text-muted-foreground">{children}</p>
      </CardContent>
    </Card>
  );
}