"use client";

import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { ChevronRight } from "lucide-react";

interface HorizontalAccordionProps {
  trigger: string;
  children: React.ReactNode;
  className?: string;
}

export function HorizontalAccordion({ 
  trigger, 
  children, 
  className = "" 
}: HorizontalAccordionProps) {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className={`flex flex-col gap-4 ${className}`}>
      {/* Trigger Button */}
      <motion.button
        onClick={() => setIsOpen(!isOpen)}
        className="flex items-center gap-2 text-gray-300 hover:text-white transition-colors whitespace-nowrap text-lg font-medium"
        whileHover={{ scale: 1.02 }}
        whileTap={{ scale: 0.98 }}
      >
        {trigger}
        <motion.div
          animate={{ 
            rotate: isOpen ? 90 : 0,
            color: isOpen ? '#ff4d00' : '#d1d5db'
          }}
          transition={{ duration: 0.2 }}
        >
          <ChevronRight className="h-4 w-4" />
        </motion.div>
      </motion.button>

      {/* Animated Content */}
      <AnimatePresence mode="wait">
        {isOpen && (
          <motion.div
            initial={{ 
              height: 0, 
              opacity: 0,
              y: -10
            }}
            animate={{ 
              height: "auto", 
              opacity: 1,
              y: 0
            }}
            exit={{ 
              height: 0, 
              opacity: 0,
              y: -10
            }}
            transition={{ 
              duration: 0.4,
              ease: [0.4, 0, 0.2, 1],
              opacity: { duration: 0.3 }
            }}
            className="overflow-hidden w-full"
            style={{ willChange: "height, opacity, transform" }}
          >
            <motion.div
              initial={{ x: -20, opacity: 0 }}
              animate={{ x: 0, opacity: 1 }}
              exit={{ x: -20, opacity: 0 }}
              transition={{ 
                duration: 0.3,
                delay: 0.15,
                ease: "easeOut"
              }}
              className="w-full max-w-2xl"
            >
              {children}
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}
