'use client';

import { useTranslations } from 'next-intl';
import { useRouter } from 'next/navigation';
import { useState, useRef } from 'react';
import { Network, Code, BookOpen, ArrowRight } from 'lucide-react';
import styles from './Products.module.css';

interface CardProps {
    product: {
        icon: React.ReactNode;
        title: string;
        desc: string;
        cta: string;
        href: string;
    };
    index: number;
}

function ProductCard({ product, index }: CardProps) {
    const router = useRouter();
    const cardRef = useRef<HTMLDivElement>(null);
    const [transform, setTransform] = useState('');

    const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
        if (!cardRef.current) return;
        
        const card = cardRef.current;
        const rect = card.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;
        
        const centerX = rect.width / 2;
        const centerY = rect.height / 2;
        
        const rotateX = (y - centerY) / 10;
        const rotateY = (centerX - x) / 10;
        
        setTransform(`perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateZ(20px)`);
    };

    const handleMouseLeave = () => {
        setTransform('perspective(1000px) rotateX(0) rotateY(0) translateZ(0)');
    };

    return (
        <div
            ref={cardRef}
            className={styles.card}
            onMouseMove={handleMouseMove}
            onMouseLeave={handleMouseLeave}
            style={{ transform }}
        >
            <div className={styles.cardGlow}></div>
            <div className={styles.cardHeader}>
                <div className={styles.iconWrapper}>{product.icon}</div>
                <h3 className={styles.cardTitle}>{product.title}</h3>
            </div>
            <p className={styles.cardDesc}>{product.desc}</p>
            <button 
                className={styles.cardButton}
                onClick={() => router.push(product.href)}
            >
                {product.cta}
                <ArrowRight size={18} />
            </button>
        </div>
    );
}

export default function Products() {
    const t = useTranslations('HomePage');

    const products = [
        {
            icon: <Network size={32} />,
            title: t('networkTitle'),
            desc: t('networkDesc'),
            cta: t('networkCta'),
            href: '/docs'
        },
        {
            icon: <Code size={32} />,
            title: t('apiTitle'),
            desc: t('apiDesc'),
            cta: t('apiCta'),
            href: '/docs'
        },
        {
            icon: <BookOpen size={32} />,
            title: t('docsTitle'),
            desc: t('docsDesc'),
            cta: t('docsCta'),
            href: '/docs'
        }
    ];

    return (
        <section className={styles.section}>
            <div className={styles.container}>
                <div className={styles.header}>
                    <span className={styles.tagline}>[{t('tagline')}]</span>
                    <h2 className={styles.title}>{t('productsTitle')}</h2>
                </div>
                <div className={styles.grid}>
                    {products.map((product, index) => (
                        <ProductCard key={index} product={product} index={index} />
                    ))}
                </div>
            </div>
        </section>
    );
}

