import React, { Fragment, useState } from "react";
import { Dialog, Transition } from "@headlessui/react";
import { AcceptCookies } from "components/AcceptCookies";

type ButtonSheetBarProps = {
  isShowing: boolean;
  onClose: () => void;
  children?: React.ReactNode;
} & Omit<React.ComponentPropsWithoutRef<"div">, "">;

export function BottomSheetModal({
  isShowing,
  onClose,
  children,
}: ButtonSheetBarProps) {
  return (
    <Transition
      appear
      show={isShowing}
      as={Fragment}
      enter="ease-in-out duration-200"
      enterFrom="translate-y-full"
      enterTo="translate-y-0"
      leave="ease-out duration-300"
      leaveFrom="translate-y-0 opacity-100"
      leaveTo="translate-y-full opacity-0"
    >
      <Dialog className="fixed bottom-0 w-full" as="div" onClose={() => {}}>
        {children}
      </Dialog>
    </Transition>
  );
}