'use client';

import { motion } from 'framer-motion';
import Image from 'next/image';
import Link from 'next/link';
import { ArrowRight, Cpu, Zap, Activity } from 'lucide-react';
import styles from './ProductCard.module.css';

interface ProductCardProps {
    id: string;
    name: string;
    subtitle: string;
    description: string;
    image: string;
    price: string;
}

export default function ProductCard({ id, name, subtitle, description, image, price }: ProductCardProps) {
    return (
        <motion.div 
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            whileHover={{ y: -8 }}
            className={styles.card}
        >
            <div className={styles.topBar}>
                <Cpu size={14} className={styles.redIcon} />
                <span className={styles.sku}>SKU: HV-{id.toUpperCase()}</span>
            </div>
            
            <div className={styles.imageBox}>
                <div className={styles.glow}></div>
                <Image src={image} alt={name} width={400} height={400} className={styles.img} />
            </div>

            <div className={styles.content}>
                <h3 className={styles.title}>
                    <span className={styles.mainTitle}>{name}</span>
                    <span className={styles.red}>{subtitle}</span>
                </h3>
                
                <p className={styles.desc}>{description.substring(0, 85)}...</p>

                <div className={styles.stats}>
                   <div className={styles.stat}>
                      <Zap size={14} />
                      <span>LOW LATENCY</span>
                   </div>
                   <div className={styles.stat}>
                      <Activity size={14} />
                      <span>TELEMETRY</span>
                   </div>
                </div>

                <div className={styles.cardFooter}>
                    <div className={styles.priceContainer}>
                      <span className={styles.label}>MSRP</span>
                      <span className={styles.price}>{price}</span>
                    </div>
                    <Link href={`/products/${id}`} className={styles.btn}>
                        <span className={styles.btnText}>READ MORE</span>
                        <div className={styles.arrowBox}>
                            <ArrowRight size={14} />
                        </div>
                    </Link>
                </div>
            </div>
        </motion.div>
    );
}
