"use client";
import React from "react";
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { useExpenseStore } from "@/lib/store/expense-store";

function SplitBetweenInput() {
  const participants = useExpenseStore((state) => state.participants);
  const splitType = useExpenseStore((state) => state.splitType);

  return (
    <Dialog>
      <DialogTrigger className="flex items-center flex-wrap gap-2" asChild>
        <Button size={"sm"} variant={"outline"} className="">
          {splitType}
        </Button>
      </DialogTrigger>
      <DialogContent
        className=" absolute size-full  sm:max-w flex-col flex"
        hideClose
      >
        <DialogHeader>
          <div className="flex items-center mb-8">
            <DialogTitle className="text-2xl">Split between</DialogTitle>
            <DialogClose asChild>
              <Button className="ml-auto">Go Back</Button>
            </DialogClose>
          </div>
        </DialogHeader>
      </DialogContent>
    </Dialog>
  );
}

export default SplitBetweenInput;