"use client"

import { useState } from "react"
import { useTranslations } from "next-intl"
import { Plus } from "lucide-react"
import { Button } from "@/shared/components/ui/button"
import { usePermission } from "@/shared/hooks/use-permission"
import { Permissions } from "@/shared/types/permissions"
import { CreateQuestionDialog } from "./create-question-dialog"

export function CreateQuestionButton(): React.ReactNode {
  const t = useTranslations("questions")
  const { hasPermission } = usePermission()
  const [open, setOpen] = useState(false)

  if (!hasPermission(Permissions.QUESTION_CREATE)) {
    return null
  }

  return (
    <>
      <Button onClick={() => setOpen(true)}>
        <Plus className="mr-2 h-4 w-4" />
        {t("addQuestion")}
      </Button>
      <CreateQuestionDialog open={open} onOpenChange={setOpen} />
    </>
  )
}
