/* ====================================================
 * Featured Products Section
 * Product cards with hover effects
 * ==================================================== */

'use client';

import Link from 'next/link';
import { motion } from 'framer-motion';
import { HiArrowRight, HiStar, HiEye } from 'react-icons/hi';
import SectionHeader from '@/components/common/SectionHeader';
import ScrollReveal from '@/components/common/ScrollReveal';
import { Product } from '@/types/api';
import Image from 'next/image';

interface FeaturedProductsProps {
  initialProducts: Product[];
}

export default function FeaturedProducts({ initialProducts }: FeaturedProductsProps) {
  const featuredProducts = initialProducts.slice(0, 4);

  return (
    <section className="section-padding bg-surface-50">
      <div className="container-custom">
        <SectionHeader
          subtitle="Sản phẩm"
          title="Sản phẩm nổi bật"
          description="Các sản phẩm dược phẩm chất lượng cao, được nghiên cứu và sản xuất theo tiêu chuẩn quốc tế."
        />

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
          {featuredProducts.map((product, index) => (
            <ScrollReveal key={product.id} animation="fadeUp" delay={index * 0.1}>
              <Link href={`/san-pham/${product.slug}`}>
                <motion.div
                  className="bg-white rounded-2xl overflow-hidden shadow-card card-hover group h-full"
                  whileHover={{ y: -6 }}
                >
                  {/* Product Image */}
                  <div className="relative aspect-square bg-gradient-to-br from-primary-50 to-accent-100 flex items-center justify-center overflow-hidden">
                    {product.thumbnail ? (
                      <Image 
                        src={product.thumbnail} 
                        alt={product.name}
                        fill
                        className="object-cover transition-transform duration-500 group-hover:scale-105"
                      />
                    ) : (
                      <div className="w-32 h-32 rounded-full bg-white/80 flex items-center justify-center text-5xl shadow-sm">
                        💊
                      </div>
                    )}

                    {/* Badges */}
                    <div className="absolute top-3 left-3 flex flex-col gap-2 z-10">
                      {product.is_featured && (
                        <span className="px-2.5 py-1 bg-primary-500 text-white text-xs font-bold rounded-full">
                          NỔI BẬT
                        </span>
                      )}
                    </div>

                    {/* Quick View */}
                    <div className="absolute inset-0 bg-primary-900/30 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
                      <span className="flex items-center gap-2 px-4 py-2 bg-white rounded-full text-primary-600 text-sm font-medium shadow-lg">
                        <HiEye className="w-4 h-4" />
                        Xem chi tiết
                      </span>
                    </div>
                  </div>

                  {/* Product Info */}
                  <div className="p-5 flex flex-col flex-1">
                    <span className="text-xs font-medium text-primary-500 uppercase tracking-wider">
                      {product.category?.name}
                    </span>
                    <h3 className="text-base font-semibold text-dark-700 mt-1 mb-2 line-clamp-2 group-hover:text-primary-600 transition-colors">
                      {product.name}
                    </h3>
                    <p className="text-sm text-dark-400 line-clamp-2 mb-3">
                      {product.short_description}
                    </p>

                    {/* Rating */}
                    <div className="flex items-center gap-2 mt-auto">
                      <div className="flex items-center gap-0.5">
                        {[...Array(5)].map((_, i) => (
                          <HiStar
                            key={i}
                            className={`w-4 h-4 text-yellow-400`}
                          />
                        ))}
                      </div>
                      <span className="text-xs text-dark-400">
                        (5)
                      </span>
                    </div>
                  </div>
                </motion.div>
              </Link>
            </ScrollReveal>
          ))}
        </div>

        {/* View All Button */}
        <ScrollReveal className="text-center mt-10">
          <Link
            href="/san-pham"
            className="inline-flex items-center gap-2 px-8 py-3.5 bg-primary-500 hover:bg-primary-600 text-white font-semibold rounded-xl transition-all duration-300 hover:shadow-lg hover:shadow-primary-500/25 hover:-translate-y-0.5"
          >
            Xem tất cả sản phẩm
            <HiArrowRight className="w-5 h-5" />
          </Link>
        </ScrollReveal>
      </div>
    </section>
  );
}