/* -------------------------------------------------------------------------- */
/*                                   Imports                                  */
/* -------------------------------------------------------------------------- */
import React from "react";
import { Disclosure as Disclose } from "@headlessui/react";
import { ReactComponent as SelectIcon } from "../assets/svg/arrow-down.svg";
import classNames from "classnames";
/* -------------------------------------------------------------------------- */
/*                               Component props                              */
/* -------------------------------------------------------------------------- */
type Props = {
  children?: React.ReactNode;
  className?: string;
  caption?: string;
};
/* -------------------------------------------------------------------------- */
/*                                 styles                                     */
/* -------------------------------------------------------------------------- */
const ButtonStyle = `
flex w-full
justify-between
items-center
py-2 text-left
text-base
font-medium
text-black-400
`;
/* -------------------------------------------------------------------------- */
/*                          Component implementation                          */
/* -------------------------------------------------------------------------- */
export default function Disclosure({ children, className, caption }: Props) {
  return (
    <div className={classNames("top-16 ", className)}>
      <div className="mx-auto w-full bg-white py-2">
        <Disclose as="div">
          {({ open }) => (
            <>
              <Disclose.Button className={`${ButtonStyle}`}>
                <span>{caption}</span>
                <SelectIcon
                  className={`${
                    open ? "rotate-180 transform" : ""
                  } h-4 w-5 fill-black hover:fill-black stroke-black`}
                />
              </Disclose.Button>
              <Disclose.Panel className="py-2 text-sm text-gray-500 ">
                {children}
              </Disclose.Panel>
            </>
          )}
        </Disclose>
      </div>
    </div>
  );
}