"use client"

import * as React from "react"
import { Pencil } from "lucide-react"
import { useTranslations } from "next-intl"

import { Button } from "@/shared/components/ui/button"
import { RoleFormDialog } from "./role-form-dialog"
import type { RoleRecord } from "../types"

interface RoleDetailEditButtonProps {
  role: RoleRecord
}

/**
 * Button that opens the role edit dialog. Client component because it manages
 * dialog open state.
 */
export function RoleDetailEditButton({ role }: RoleDetailEditButtonProps) {
  const t = useTranslations("rbac")
  const [open, setOpen] = React.useState(false)

  return (
    <>
      <Button variant="outline" size="sm" onClick={() => setOpen(true)}>
        <Pencil className="mr-2 h-4 w-4" />
        {t("roles.editButton")}
      </Button>
      <RoleFormDialog open={open} onOpenChange={setOpen} editRole={role} />
    </>
  )
}
