preguntas

import React from "react";
import { motion, AnimatePresence } from "framer-motion";
import { PlusIcon } from "@heroicons/react/24/outline"; // Importa el ícono de "+" de Heroicons

const PreguntasFrecuentes = ({ title, children }) => {
    const [isOpen, setIsOpen] = React.useState(false);

    const acordionPreguntas = () => {
        setIsOpen(!isOpen);
    };

    return (
        <div className="flex flex-col items-center justify-center px-4 py-2">
            {/* Contenedor del acordeón */}
            <div
                className={`w-[48rem] sm:max-w-[30rem] md:max-w-[35rem] lg:max-w-[45rem]
                bg-gris_hueso rounded-md border overflow-hidden transition-all duration-300
               
                ${isOpen ? "border-verde_lila" : "border-black"}
            `}
            >
                <button
                    className={`flex items-center justify-between
                    text-black w-full p-4 text-left ${isOpen ? "bg-orange" : ""
                        }`}
                    onClick={acordionPreguntas}
                >
                    <span className="text-base md:text-lg text-black">{title}</span>

                    {/* Ícono de "+" animado */}
                    <motion.span
                        initial={{ rotate: 0 }}
                        animate={{ rotate: isOpen ? 45 : 0 }}
                        transition={{ duration: 0.3, ease: [0.87, 0, 0.13, 1] }}
                    >
                        <PlusIcon
                            className={`w-6 h-6 ${isOpen ? "text-red-500" : "text-morado"
                                }`}
                        />
                    </motion.span>
                </button>

                {/* Contenido del acordeón animado */}
                <AnimatePresence>
                    {isOpen && (
                        <motion.div
                            initial={{ height: 0, opacity: 0 }}
                            animate={{ height: "auto", opacity: 1 }}
                            exit={{ height: 0, opacity: 0 }}
                            transition={{ duration: 0.3, ease: [0.87, 0, 0.13, 1] }}
                            className="overflow-hidden"
                        >
                            <div className="p-4 text-black text-sm md:text-base">{children}</div>
                        </motion.div>
                    )}
                </AnimatePresence>
            </div>
        </div>
    );
};

export default PreguntasFrecuentes;