"use client";

import Image from "next/image";
import { motion } from "framer-motion";
import { ExternalLink } from "lucide-react";
import { useTranslations } from "next-intl";
import type { Product } from "@/lib/products";

interface ProductCardProps {
  product: Product;
  onViewDetails: (slug: string) => void;
}

export function ProductCard({ product, onViewDetails }: ProductCardProps) {
  const t = useTranslations();

  return (
    <motion.div
      whileHover={{ y: -8 }}
      className="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-shadow"
    >
      {/* Image */}
      <div className="relative h-48 bg-gray-100 overflow-hidden group">
        <Image
          src={product.images[0]}
          alt={t(product.nameKey)}
          fill
          className="object-cover group-hover:scale-110 transition-transform duration-300"
        />
        <div className="absolute inset-0 bg-black/0 group-hover:bg-black/30 transition-colors" />
      </div>

      {/* Content */}
      <div className="p-6">
        <h3 className="text-xl font-bold text-gray-900 mb-2">
          {t(product.nameKey)}
        </h3>
        <p className="text-gray-600 text-sm mb-4">
          {t(product.shortDescriptionKey)}
        </p>

        {/* Specs Preview */}
        <div className="mb-4 space-y-2">
          {product.specs.slice(0, 2).map((spec, idx) => (
            <div key={idx} className="flex justify-between text-sm">
              <span className="text-gray-600">{spec.key}:</span>
              <span className="font-semibold text-gray-900">{spec.value}</span>
            </div>
          ))}
        </div>

        {/* CTA Button */}
        <motion.button
          whileHover={{ scale: 1.05 }}
          whileTap={{ scale: 0.95 }}
          onClick={() => onViewDetails(product.slug)}
          className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors"
        >
          {t("products.viewDetails")}
          <ExternalLink size={16} />
        </motion.button>
      </div>
    </motion.div>
  );
}