'use client';

import { useState } from 'react';
import { Button } from '@/components/ui/button';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuTrigger
} from '@/components/ui/dropdown-menu';
import { Icons } from '@/components/icons';
import type { UserPermissionAssignmentListItem } from '../api/types';
import { UserPermissionSheet } from './user-permission-sheet';

export function UserPermissionRowActions({ data }: { data: UserPermissionAssignmentListItem }) {
  const [open, setOpen] = useState(false);

  return (
    <>
      <UserPermissionSheet userId={data.user_id} open={open} onOpenChange={setOpen} />
      <DropdownMenu modal={false}>
        <DropdownMenuTrigger asChild>
          <Button variant='ghost' className='h-8 w-8 p-0'>
            <Icons.ellipsis className='h-4 w-4' />
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align='end'>
          <DropdownMenuLabel>Actions</DropdownMenuLabel>
          <DropdownMenuItem onClick={() => setOpen(true)}>
            <Icons.edit className='mr-2 h-4 w-4' /> Manage Permissions
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </>
  );
}
