prod-wag-backend-automate-services/WebServices/management-frontend/src/components/commons/ActionButtonsComponent.tsx

"use client";
import React from "react";
import { Button } from "@/components/ui/button";
import { Plus } from "lucide-react";

interface ActionButtonsComponentProps {
  onCreateClick: () => void;
  translations: Record<string, any>;
  lang: string;
  customButtons?: {
    label: string;
    onClick: () => void;
    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
    icon?: React.ReactNode;
  }[];
}

export const ActionButtonsComponent: React.FC<ActionButtonsComponentProps> = ({
  onCreateClick,
  translations,
  lang,
  customButtons = [],
}) => {
  const t = translations[lang] || {};

  return (
    <div className="flex justify-between items-center my-4">
      <div className="flex space-x-2">
        <Button onClick={onCreateClick} className="flex items-center">
          <Plus className="mr-2 h-4 w-4" />
          {t.create || "Create"}
        </Button>
        
        {/* Render custom buttons */}
        {customButtons.map((button, index) => (
          <Button 
            key={index} 
            onClick={button.onClick} 
            variant={button.variant || "default"} 
            className="flex items-center"
          >
            {button.icon && <span className="mr-2">{button.icon}</span>}
            {button.label}
          </Button>
        ))}
      </div>
    </div>
  );
};