'use client';
import { motion } from 'framer-motion';

const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1
    }
  }
};

const itemVariants = {
  hidden: { opacity: 0, y: 10 },
  visible: { 
    opacity: 1, 
    y: 0,
    transition: {
      duration: 0.5
    }
  }
};

export default function Questions({
  questions
}: {
  questions: {
    question: string;
    answer: string | React.ReactNode;
  }[];
}) {
  return (
    <motion.div
      variants={containerVariants}
      initial="hidden"
      animate="visible"
      className="space-y-1"
    >
      {questions.map((faq, index) => (
        <motion.div 
          className="collapse collapse-arrow rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300" 
          key={index}
          variants={itemVariants}
        >
          <input
            type="radio"
            name="collapse-services"
            defaultChecked={index === 0}
          />
          <motion.div 
            className="collapse-title text-xl font-medium text-gray-800"
            whileHover={{ color: '#f97316' }}
          >
            {faq.question}
          </motion.div>
          <motion.div 
            className="collapse-content"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 0.3 }}
          >
            <p className="text-md text-gray-600">{faq.answer}</p>
          </motion.div>
        </motion.div>
      ))}
    </motion.div>
  );
}