'use client';

import { motion } from 'framer-motion';
import Link from 'next/link';
import Image from 'next/image';
import { ArrowRight, CheckCircle2 } from 'lucide-react';

interface ProductCardProps {
  product: {
    id: string;
    title: string;
    description: string;
    image: string;
    category: string;
    status: string;
    features?: string[];
  };
}

export function ProductCard({ product }: ProductCardProps) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 30 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      transition={{
        duration: 0.65,
        ease: [0.22, 1, 0.36, 1] as const,
      }}
      className="group"
    >
      <Link href={`/products/${product.id}`} className="block">
        <div className="relative h-full rounded-2xl bg-white border border-border-primary overflow-hidden hover:border-brand/30 hover:shadow-lg hover:-translate-y-1 transition-all duration-300">
          <div className="aspect-video relative overflow-hidden bg-bg-secondary">
            <Image
              src={product.image}
              alt={product.title}
              fill
              sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
              className="object-cover group-hover:scale-105 transition-transform duration-500"
            />

            <div className="absolute top-4 left-4 flex gap-2">
              <span className="px-3 py-1 rounded-full text-xs font-semibold bg-brand text-white shadow-md">
                {product.category}
              </span>
              {product.status === '已发布' && (
                <span className="px-3 py-1 rounded-full text-xs font-medium bg-green-500 text-white shadow-md flex items-center gap-1">
                  <CheckCircle2 className="w-3 h-3" />
                  已发布
                </span>
              )}
            </div>
          </div>

          <div className="p-6">
            <h3 className="text-xl font-bold text-ink mb-3 group-hover:text-brand transition-colors">
              {product.title}
            </h3>

            <p className="text-sm text-text-muted leading-relaxed mb-5 line-clamp-2">
              {product.description}
            </p>

            {product.features && product.features.length > 0 && (
              <div className="flex flex-wrap gap-2 mb-5">
                {product.features.slice(0, 3).map((feature) => (
                  <span
                    key={feature}
                    className="px-2.5 py-1 rounded-md text-xs font-medium bg-bg-secondary text-text-muted border border-border-primary"
                  >
                    {feature}
                  </span>
                ))}
              </div>
            )}

            <div className="flex items-center gap-2 text-sm font-semibold text-brand group-hover:gap-3 transition-all">
              了解详情
              <ArrowRight className="w-4 h-4" />
            </div>
          </div>
        </div>
      </Link>
    </motion.div>
  );
}