"use client";

import { ChevronUp } from "lucide-react";
import { type PropsWithChildren } from "react";

import { Drawer, DrawerContent, DrawerTrigger } from "@/components/ui/drawer";

export interface RezervationSummaryProps extends PropsWithChildren {
  price: string;
  button: any;
  children: string | JSX.Element | JSX.Element[];
}

export default function RezervationSummaryDrawer({
  children,
  price,
  button,
}: RezervationSummaryProps) {
  return (
    <Drawer>
      <div className="fixed inset-x-0 bottom-0 z-50 flex h-[72px] w-full items-center justify-between border-t bg-white px-4 py-3 shadow-xl">
        <div className="flex w-full items-center justify-between">
          <div className="flex items-center gap-2">
            <DrawerTrigger>
              <ChevronUp className="text-blue-500" />
            </DrawerTrigger>
            <div className="flex flex-col">
              <span className="text-xs text-gray-500">Toplam</span>
              <strong className="text-xl font-semibold">{price}</strong>
            </div>
          </div>

          {button}
        </div>
      </div>
      <DrawerContent className="flex h-[90vh] max-h-[670px] flex-col justify-between pb-4">
        <div className="scroll-bar my-4 max-h-[600px] overflow-y-scroll px-4">
          {children}
        </div>
      </DrawerContent>
    </Drawer>
  );
}