import { ActionButton } from "@/components/ui/ActionButton/ActionButton";
import { cn } from "@/lib/utils";

interface PaymentButtonsProps extends React.ComponentProps<"div"> {
  buttons: (React.ComponentProps<typeof ActionButton> & {
    icon?: React.ReactNode;
  })[];
}
export default function PaymentButtons({
  buttons,
  ...props
}: PaymentButtonsProps) {
  return (
    <div
      {...props}
      className={cn("w-full flex flex-col items-center gap-3", props.className)}
    >
      {buttons.map((button, index) => (
        <ActionButton
          key={index}
          {...button}
          className={cn(
            "bg-trial-payment-foreground",
            "font-inter font-medium text-primary-foreground text-base",
            "rounded-[8px]",
            "shadow-none",
            button.className
          )}
        >
          {button.icon}
          {button.children}
        </ActionButton>
      ))}
    </div>
  );
}
