'use client';
import { useState } from 'react';
import { motion } from 'framer-motion';
import * as Si from 'react-icons/si';
import { techStack } from '@/content/techstack';
import styles from './TechStack.module.scss';

const categories = ['all', 'language', 'framework', 'tool', 'database'] as const;

export default function TechStack() {
  const [active, setActive] = useState<string>('all');

  const filtered = active === 'all'
    ? techStack
    : techStack.filter(t => t.category === active);

  return (
    <section className={styles.section} id="tech">
      <div className={styles.container}>
        <motion.header
          className={styles.header}
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: '-30px' }}
          transition={{ duration: 0.5 }}
        >
          <h2 className={styles.heading}>
            Technologies<span className={styles.dot}>.</span>
          </h2>
          <p className={styles.subtitle}>Languages, frameworks, tools & databases I work with.</p>
        </motion.header>

        <motion.div
          className={styles.tabs}
          role="tablist"
          initial={{ opacity: 0, y: 12 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.4, delay: 0.08 }}
        >
          {categories.map(cat => (
            <button
              key={cat}
              role="tab"
              aria-selected={active === cat}
              className={`${styles.tab} ${active === cat ? styles.tabActive : ''}`}
              onClick={() => setActive(cat)}
            >
              {cat.charAt(0).toUpperCase() + cat.slice(1)}
            </button>
          ))}
        </motion.div>

        <motion.div
          className={styles.grid}
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true, margin: '-20px' }}
          variants={{ visible: { transition: { staggerChildren: 0.03, delayChildren: 0.05 } } }}
        >
          {filtered.map((tech, i) => {
            const Icon = (Si as Record<string, React.ElementType>)[tech.icon] ?? Si.SiCoder;
            return (
              <motion.div
                key={tech.name}
                className={styles.card}
                variants={{
                  hidden: { opacity: 0, y: 16 },
                  visible: { opacity: 1, y: 0 },
                }}
                transition={{ duration: 0.35, ease: [0.22, 0.61, 0.36, 1] }}
                whileHover={{ y: -3, transition: { duration: 0.2 } }}
              >
                <span className={styles.iconWrap}>
                  <Icon className={styles.icon} aria-hidden="true" />
                </span>
                <span className={styles.label}>{tech.name}</span>
              </motion.div>
            );
          })}
        </motion.div>

      </div>
    </section>
  );
}