'use client';

import { motion, type Variants } from 'framer-motion';

const tracks = [
  { name: 'Web Development', color: 'bg-blue-50 border-blue-100 text-blue-700' },
  { name: 'Data Analytics', color: 'bg-emerald-50 border-emerald-100 text-emerald-700' },
  { name: 'Product Design', color: 'bg-purple-50 border-purple-100 text-purple-700' },
  { name: 'Digital Marketing', color: 'bg-orange-50 border-orange-100 text-orange-700' },
  { name: 'AI & Automation', color: 'bg-violet-50 border-violet-100 text-violet-700' },
];

const containerVariants: Variants = {
  hidden: {},
  visible: { transition: { staggerChildren: 0.08 } },
};

const itemVariants: Variants = {
  hidden: { opacity: 0, scale: 0.88, y: 8 },
  visible: {
    opacity: 1,
    scale: 1,
    y: 0,
    transition: { duration: 0.35, ease: 'easeOut' as const },
  },
};

export default function TracksSection() {
  return (
    <div className="space-y-3">
      <motion.p
        className="text-xs font-bold text-gray-400 uppercase tracking-widest"
        initial={{ opacity: 0, x: -12 }}
        whileInView={{ opacity: 1, x: 0 }}
        viewport={{ once: true }}
        transition={{ duration: 0.4 }}
      >
        Available Tracks
      </motion.p>

      <motion.div
        className="flex flex-wrap gap-2"
        variants={containerVariants}
        initial="hidden"
        whileInView="visible"
        viewport={{ once: true, amount: 0.3 }}
      >
        {tracks.map((track) => (
          <motion.div
            key={track.name}
            variants={itemVariants}
            whileHover={{ scale: 1.04, y: -1 }}
            transition={{ duration: 0.15 }}
            className={`flex items-center gap-2 border rounded-xl px-3.5 py-2 text-xs font-semibold cursor-default select-none ${track.color}`}
          >
            {/* <span className="text-sm leading-none">{track.icon}</span> */}
            {track.name}
          </motion.div>
        ))}
      </motion.div>
    </div>
  );
}