Bottom sheet

"use client";

import {
  Button,
  PaymentMethodPicker,
  Sheet,
  SheetContent,
  SheetDescription,
  SheetTitle,
  SheetTrigger,
  toast,
} from "@waveinno/ui";
import { Sparkles } from "lucide-react";
import * as React from "react";

export default function BottomSheetDemo() {
  const [open, setOpen] = React.useState(false);
  return (
    <div className="flex flex-wrap gap-3">
      <Sheet open={open} onOpenChange={setOpen}>
        <SheetTrigger asChild>
          <Button variant="primary">
            <Sparkles /> Pay ৳120
          </Button>
        </SheetTrigger>
        <SheetContent side="bottom" className="px-5 pb-6">
          <SheetTitle className="text-[17px] font-semibold text-text">Pay for DHA-GA 12-3456</SheetTitle>
          <SheetDescription className="mt-0.5 text-[13px] text-muted">2 h 10 min at Gulshan, level B. Drag the handle down to close.</SheetDescription>
          <PaymentMethodPicker className="mt-5" methods={["bkash", "nagad", "card", "cash"]} />
          <Button
            variant="gradient"
            size="lg"
            className="mt-5 w-full"
            onClick={() => {
              setOpen(false);
              toast.success("Paid ৳120");
            }}
          >
            Pay ৳120
          </Button>
        </SheetContent>
      </Sheet>
    </div>
  );
}