"use client";

import { Button } from "@/components/ui/button";
import { FaChevronRight, FaChevronLeft } from "react-icons/fa6";
import { useLocaleDirection } from "@/hooks/useLocale";
import { ReactNode } from "react";

interface ButtonWithIconProps {
  children: ReactNode;
  variant?: "default" | "primary" | "outline" | "radial-gradient-white";
  className?: string;
  iconSize?: string;
  onClick?: () => void;
}

export default function ButtonWithIcon({
  children,
  variant = "default",
  className = "",
  iconSize = "size-3",
  onClick,
}: ButtonWithIconProps) {
  const { isRTL } = useLocaleDirection();

  return (
    <Button
      variant={variant}
      className={`flex items-center justify-center gap-2 ${className}`}
      onClick={onClick}
    >
      <span>{children}</span>
      {isRTL ? (
        <FaChevronLeft className={`${iconSize} text-black`} />
      ) : (
        <FaChevronRight className={`${iconSize} text-black`} />
      )}
    </Button>
  );
}