// src/components/filters/DropdownBase.jsx
import React from "react";

export default function DropdownBase({
  label,
  icon,
  isOpen,
  onToggle,
  children,
  buttonClassName = "",
  menuClassName = "",
  minWidthClassName = "min-w-44",
}) {
  return (
    <div className="relative sm:w-fit w-full inline-block">
      <button
        type="button"
        onClick={onToggle}
        className={
          "inline-flex items-center sm:justify-center justify-between sm:w-fit w-full shadow border dark:border-white/10 border-neutral-200 dark:bg-[#A1E3F919] dark:text-white text-black bg-brand box-border rounded-xl dark:shadow-xs font-medium leading-5 text-xs sm:text-sm md:text-md px-4 py-2.5 " +
          buttonClassName
        }
      >
        {icon}
        <span className="ml-1.5">{label}</span>
        <svg
          className={`w-4 h-4 ms-1.5 dark:text-white text-[#43BEFF] -me-0.5 transition-transform duration-200 ${isOpen ? "rotate-180" : ""}`}
          aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          fill="none"
          viewBox="0 0 24 24"
        >
          <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="m19 9-7 7-7-7" />
        </svg>
      </button>

      <div
        className={
          `absolute z-10 dark:bg-[#001F3F] bg-[#f2f2f2] rounded-md shadow-lg mt-2 ${minWidthClassName} transition-all duration-200 origin-top right-px ` +
          (isOpen ? "opacity-100 scale-100" : "opacity-0 scale-95 pointer-events-none") +
          " " +
          menuClassName
        }
      >
        {children}
      </div>
    </div>
  );
}
