import Link from "next/link";
import { ArrowUpRight } from "lucide-react";
import type { Product } from "@/lib/products";
import { ProductIcon } from "./ProductIcon";

export function ProductCard({ product, compact = false }: { product: Product; compact?: boolean }) {
  return (
    <Link href={`/urunler/${product.slug}`} className={`product-card ${compact ? "product-card-compact" : ""}`}>
      <div className="product-card-top">
        <span className="product-icon" style={{ background: product.accent }}><ProductIcon slug={product.slug} /></span>
        <span className="product-arrow"><ArrowUpRight size={18} /></span>
      </div>
      <div>
        <span className="product-category">{product.category}</span>
        <h3>{product.shortName}</h3>
        {!compact && <p>{product.description}</p>}
      </div>
    </Link>
  );
}