import Link from "next/link";
import { ArrowUpRight, MessageCircle, ThumbsDown, ThumbsUp } from "lucide-react";
import type { ProductWithStats } from "@/lib/data";
import { StatusBadge } from "@/components/StatusBadge";
import { Badge } from "@/components/ui/badge";
import { formatPrice, formatRelativeTime } from "@/lib/utils";

export function ProductCard({ product }: { product: ProductWithStats }) {
  const price = formatPrice(product.price, product.currency);

  return (
    <Link
      href={`/products/${product.id}`}
      className="group flex flex-col overflow-hidden rounded-xl border bg-background transition-shadow hover:shadow-md"
    >
      <div className="aspect-square w-full overflow-hidden bg-muted">
        {product.image_url ? (
          // eslint-disable-next-line @next/next/no-img-element
          <img
            src={product.image_url}
            alt={product.title}
            className="h-full w-full object-cover transition-transform group-hover:scale-105"
          />
        ) : (
          <div className="flex h-full w-full items-center justify-center text-4xl">
            🛍️
          </div>
        )}
      </div>
      <div className="flex flex-1 flex-col gap-2 p-3">
        <div className="flex items-start justify-between gap-2">
          <h3 className="line-clamp-2 font-medium leading-snug">
            {product.title}
          </h3>
          <StatusBadge status={product.status} />
        </div>

        {price && <p className="font-semibold">{price}</p>}

        {product.tags.length > 0 && (
          <div className="flex flex-wrap gap-1">
            {product.tags.slice(0, 3).map((tag) => (
              <Badge key={tag} variant="secondary" className="font-normal">
                {tag}
              </Badge>
            ))}
          </div>
        )}

        <div className="mt-auto flex items-center justify-between pt-2 text-sm text-muted-foreground">
          <div className="flex items-center gap-3">
            <span className="flex items-center gap-1">
              <ThumbsUp className="h-3.5 w-3.5" /> {product.upvotes}
            </span>
            <span className="flex items-center gap-1">
              <ThumbsDown className="h-3.5 w-3.5" /> {product.downvotes}
            </span>
            <span className="flex items-center gap-1">
              <MessageCircle className="h-3.5 w-3.5" /> {product.commentCount}
            </span>
          </div>
          <div className="flex items-center gap-2">
            {product.source_url && (
              <ArrowUpRight className="h-3.5 w-3.5" />
            )}
            <span>{formatRelativeTime(product.created_at)}</span>
          </div>
        </div>
      </div>
    </Link>
  );
}