Turn Ideas
Into Impact.

import { motion, AnimatePresence } from 'framer-motion';
import { useState } from 'react';

export default function ClothesCloset2026({ garments }) {
  const [activeIdx, setActiveIdx] = useState(0);
  const [colorTag, setColorTag] = useState('black');
  const [isBackView, setIsBackView] = useState(false);

  return (
    <div className="relative w-full overflow-hidden bg-slate-950 py-16 text-white">
      {/* Heavy Brushed Metallic Clothes Rail */}
      <div className="absolute top-24 left-0 right-0 h-1 bg-gradient-to-r from-zinc-600 via-zinc-200 to-zinc-600 shadow-md" />

      {/* 3D Rail Hangers Track */}
      <motion.div 
        className="flex items-center justify-center gap-12"
        animate={{ x: -activeIdx * 240 }}
        transition={{ type: "spring", stiffness: 260, damping: 28 }}
      >
        {garments.map((item, idx) => {
          const isSelected = idx === activeIdx;
          return (
            <motion.div
              key={item.id}
              onClick={() => setActiveIdx(idx)}
              animate={{
                scale: isSelected ? 1.15 : 0.82,
                y: isSelected ? 20 : 0,
                filter: isSelected ? "blur(0px)" : "blur(4px)",
                opacity: isSelected ? 1 : 0.45,
              }}
              className="relative cursor-pointer transition-all duration-300"
            >
              <HangerTriangle />
              <motion.div 
                animate={{ rotateY: isSelected && isBackView ? 180 : 0 }}
                transition={{ duration: 0.6 }}
              >
                <GarmentTexture src={item[colorTag]} />
              </motion.div>
            </motion.div>
          );
        })}
      </motion.div>
    </div>
  );
}