"use client";

import Link from "next/link";
import Image from "next/image";
import { motion } from "framer-motion";

export function AllProductCard({
  product,
  imageUrl,
}: {
  product: any;
  imageUrl: string;
}) {
  // Determine the correct link based on available data
  let productLink = `/products/all/${product.id}`;

  // If we have subcategory_id, use the proper structure
  if (product.subcategory_id) {
    productLink = `/products/subcategory/${product.subcategory_id}/${product.id}`;
  }

  return (
    <Link href={productLink}>
      <motion.div
        whileHover={{ y: -5 }}
        className="bg-white border border-gray-200 rounded-xl overflow-hidden hover:border-red-600 transition-colors shadow-sm hover:shadow-md h-full"
      >
        <div className="relative h-48 bg-gray-100">
          <Image
            src={imageUrl || "/placeholder.svg"}
            alt={product.name}
            fill
            className="object-cover"
          />
        </div>
        <div className="p-6">
          <h3 className="text-xl font-semibold text-gray-900 mb-2">
            {product.name}
          </h3>
          <p className="text-gray-600 text-sm line-clamp-2">
            {product.short_description}
          </p>
          <div className="mt-4">
            {product.category?.name && (
              <span className="inline-block bg-orange-100 text-orange-600 text-xs px-3 py-1 rounded-full">
                {product.category.name}
              </span>
            )}
          </div>
        </div>
      </motion.div>
    </Link>
  );
}