import { useState } from "react";
import React from "react";
import { ArrowRightIcon } from "@heroicons/react/24/outline";

import Button from "./Button";
import RoundedContainer from "./RoundedContainer";

export default function Dropdown({
  title,
  mode,
  children,
}: {
  title?: string;
  mode?: "DARK" | "LIGHT";
  children: React.ReactNode;
}) {
  const [dropped, setDropped] = useState<boolean>(false);
  const [degrees, setDegrees] = useState<number>(0);

  return (
    <div>
      <Button
        title={title ? title : ""}
        mode={mode}
        onClick={() => {
          setDropped(!dropped);
          if (degrees < 90) {
            setDegrees(90);
          } else {
            setDegrees(0);
          }
        }}
        icon={
          <ArrowRightIcon
            className={`size-4 transition-transform rotate-${degrees}`}
          />
        }
      />
      <RoundedContainer
        slim={true}
        className={`${!dropped && "invisible"} absolute z-10 flex flex-col gap-2 transition-discrete duration-150 ease-out`}
      >
        {children}
      </RoundedContainer>
    </div>
  );
}