"use client"

import { cn } from "@/lib/utils"
import type { WorkflowAction } from "./workflow-config"
import type { WorkflowDefinition } from "./workflow-config"
import { getAllowedActions } from "./workflow-config"
import { Button } from "@/components/ui/button"

type Props = {
  definition: WorkflowDefinition
  status: string
  permissions: string[]
  language: "ar" | "en"
  permissionMap?: Record<string, string>
  onAction: (action: WorkflowAction) => void
  disabled?: boolean
  disabledActions?: string[]
}

export function ActionBar({ definition, status, permissions, language, permissionMap, onAction, disabled, disabledActions = [] }: Props) {
  const actions = getAllowedActions(definition, status, permissions, permissionMap)
  const disabledActionSet = new Set(disabledActions)

  if (actions.length === 0) {
    return (
      <p className="text-sm text-muted-foreground">
        {language === "ar"
          ? "لا توجد إجراءات متاحة لحسابك في هذه الحالة."
          : "No actions are available for your account in this state."}
      </p>
    )
  }

  return (
    <div className={cn("flex flex-wrap gap-2")}>
      {actions.map(action => (
        <Button
          key={action.key}
          variant={action.variant ?? "primary"}
          size="sm"
          disabled={disabled || disabledActionSet.has(action.key)}
          onClick={() => onAction(action)}
        >
          {action.label[language]}
        </Button>
      ))}
    </div>
  )
}
