"use client";

import React from "react";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { Settings } from "lucide-react";
import { Button } from "@/components/ui/button";
import UserPermissionsForm, {
  UserPermissionsFormProps,
} from "./user-permissions-form";

function UserPermissionsPopover(props: UserPermissionsFormProps) {
  const [open, setOpen] = React.useState(false);
  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button
          size={"icon"}
          variant={"outline"}
          className="size-max gap-1 bg-muted p-px text-muted-foreground"
        >
          <Settings className="size-3" />
        </Button>
      </PopoverTrigger>
      <PopoverContent side="left" align="start">
        <UserPermissionsForm {...props} cb={() => setOpen(false)} />
      </PopoverContent>
    </Popover>
  );
}

export default UserPermissionsPopover;
