"use client";

import { Heart, ShoppingCart, Eye } from "lucide-react";

interface MiniProductCardProps {
  image: string;
  category: string;
  title: string;
  price: number;
  oldPrice?: number;
  sale?: boolean;
}

export default function MiniProductCard({
  image,
  category,
  title,
  price,
  oldPrice,
  sale = false,
}: MiniProductCardProps) {
  return (
    <div className="group custom-mini-card bg-white rounded-xl border border-gray-200 p-4">
      <div className="flex items-center gap-3 w-full">

        <div className="relative w-[65px] h-[65px] flex-shrink-0">
          <img
            src={image}
            alt={title}
            width={65}
            height={65}
            className="w-full h-full object-contain"
          />
        </div>

        <div className="flex-1 min-w-0">

          <p className="text-sm text-gray-400">
            {category}
          </p>

          <h3 className="text-[16px] font-medium text-gray-700 line-clamp-2">
            {title}
          </h3>

          <div className="flex items-center gap-2 mt-2">
            <span className="font-bold text-gray-700">
              AED {price.toFixed(2)}
            </span>

            {sale && oldPrice !== undefined && (
              <span className="line-through text-gray-400 text-sm">
                AED {oldPrice.toFixed(2)}
              </span>
            )}
          </div>

        </div>

        <div className="flex flex-col gap-2">

          <button
            type="button"
            className="w-8 h-8 rounded-full flex items-center justify-center text-gray-500"
          >
            <Heart size={15} />
          </button>

          <button
            type="button"
            className="w-8 h-8 rounded-full flex items-center justify-center text-gray-500"
          >
            <ShoppingCart size={15} />
          </button>

          <button
            type="button"
            className="w-8 h-8 rounded-full flex items-center justify-center text-gray-500"
          >
            <Eye size={15} />
          </button>

        </div>

      </div>
    </div>
  );
}