"use client";
import React from "react";
import { Button } from "@/components/ui/button";
import { CustomButton } from "./types";
import { cn } from "@/lib/utils";

interface CustomButtonComponentProps {
  button: CustomButton;
  isSelected: boolean;
  onClick: () => void;
}

export const CustomButtonComponent: React.FC<CustomButtonComponentProps> = ({
  button,
  isSelected,
  onClick,
}) => {
  return (
    <Button 
      onClick={onClick} 
      variant={button.variant || "default"} 
      className={cn(
        "flex items-center",
        isSelected && "ring-2 ring-primary ring-offset-2"
      )}
    >
      {button.icon && <span className="mr-2">{button.icon}</span>}
      {button.label}
    </Button>
  );
};