"use client";

import { motion, type Variants } from "motion/react";
import { useReducedMotion } from "@/app/hooks/useReducedMotion";
import type { PortfolioSkillCategory } from "@/lib/portfolio-data";
import { DrawLine } from "./animations/DrawLine";
import { Section } from "./Section";

export default function Skills({
  categories,
}: {
  categories: PortfolioSkillCategory[];
}) {
  const shouldReduceMotion = useReducedMotion();

  const gridVariants: Variants = {
    hidden: {},
    visible: {
      transition: {
        delayChildren: 0.06,
        staggerChildren: 0.08,
      },
    },
  };

  const cardVariants: Variants = {
    hidden: shouldReduceMotion
      ? { opacity: 0 }
      : { opacity: 0, y: 20, clipPath: "inset(100% 0 0 0)" },
    visible: {
      opacity: 1,
      y: 0,
      clipPath: "inset(0% 0 0 0)",
      transition: shouldReduceMotion
        ? { duration: 0.25 }
        : { duration: 0.8, ease: [0.16, 1, 0.3, 1] },
    },
  };

  return (
    <Section
      id="skills"
      eyebrow="Core stack"
      title="Next.js, Tauri, Rust e stack para produtos críticos"
      description="Tecnologias e fundamentos que uso em engenharia de software, arquitetura de software, IoT e integrações complexas."
      dark
      disableChildrenAnimation
    >
      <motion.div
        className="ds-grid-2"
        initial="hidden"
        whileInView="visible"
        viewport={{ once: true, amount: 0.2 }}
        variants={gridVariants}
      >
        {categories.map((category) => (
          <motion.article
            key={category.category}
            className="ds-card h-full"
            variants={cardVariants}
            whileHover={
              shouldReduceMotion
                ? undefined
                : {
                    y: -4,
                    boxShadow: "0 20px 40px rgba(0, 0, 0, 0.35)",
                  }
            }
            whileTap={shouldReduceMotion ? undefined : { scale: 0.99 }}
            transition={{ type: "spring", stiffness: 180, damping: 18 }}
          >
            <h3 className="ds-card-title !mt-0" data-reel="left">
              {category.category}
            </h3>
            <DrawLine delay={0.05} />
            <p className="ds-copy !mt-sp-4" data-reel="right">
              Ferramentas que uso para construir com clareza tecnica e ritmo de
              entrega.
            </p>
            <ul className="ds-tags" data-reel-stagger="fade">
              {category.skills.map((skill) => (
                <li key={skill} className="ds-tag">
                  {skill}
                </li>
              ))}
            </ul>
          </motion.article>
        ))}
      </motion.div>
    </Section>
  );
}