import Dropdown from "@/components/Dropdown";
import clsx from "clsx";
import { ReactNode } from "react";

interface Props {
    module: string;
    title: string;
    open: boolean;
    disabled?: boolean;
    setIsOpen: (isOpen: boolean) => void;
    children: ReactNode;
    center?: boolean;
    contentWrapperClassName?: string;
}

const SettingsDropdown: React.FC<Props> = ({ module, title, open, setIsOpen, children, contentWrapperClassName = '', disabled = false, center = false}) => {
    return (
        <Dropdown
            title={title}
            className={clsx(
                "w-full font-semibold flex justify-between items-center p-4 bg-gradient-to-r border text-white shadow-md transition-all duration-300 disabled:cursor-not-allowed",
                `bg-ielts-${module}/70 border border-ielts-${module} hover:bg-ielts-${module} disabled:bg-ielts-${module}/30`,
                open ? "rounded-t-lg" : "rounded-lg"
            )}
            contentWrapperClassName={`pt-6 px-2 bg-white rounded-b-lg shadow-md transition-all duration-300 ease-in-out ${center ? "flex justify-center" : ""} ${contentWrapperClassName}`}
            open={open}
            setIsOpen={setIsOpen}
            disabled={disabled}
        >
            {children}
        </Dropdown>
    );
}

export default SettingsDropdown;
