"use client";

import { Button } from "./button";
import { Icons } from "../icons";
import React from "react";
import TranslateClient from "./localization/TranslateClient";
import { cn } from "@/lib/utils";
import useCurrentLanguage from "@/hooks/useCurrentLanguage";

interface IconButtonProps {
  onClick: () => void;
  className?: string;
  disabled: boolean;
  loading: boolean;
  inCart: boolean;
}

export const IconButton: React.FC<IconButtonProps> = ({
  onClick,
  className,
  disabled,
  loading,
  inCart,
}) => {
  const { lang } = useCurrentLanguage();

  return (
    <Button
      onClick={onClick}
      className={cn(
        "group relative border rounded-xl font-bold min-h-[44px] w-full",
        className,
        {
          "border-slate-400 text-slate-400": disabled,
          "border-mainBlue text-mainBlue hover:border-mainLime hover:text-mainLime":
            !disabled,
          "pl-[3.5rem]": lang === "ar",
          "pr-[3.5rem]": lang === "en",
        }
      )}
      disabled={disabled}
    >
      <span>
        <TranslateClient
          text={inCart ? "in_cart" : loading ? "saving_to_cart" : "add_to_cart"}
        />
      </span>

      <div
        className={cn(
          "absolute top-0 bg-mainBlue w-[42px] h-[42px] flex items-center justify-center rounded-[10px] transition-colors",
          {
            "bg-slate-400": disabled,
            "bg-mainBlue group-hover:bg-mainLime": !disabled,
            "left-0": lang === "ar",
            "right-0": lang === "en",
          }
        )}
      >
        {loading && <Icons.spinner className="animate-spin text-white" />}
        {!loading && <Icons.ShoppingCart className="text-white" />}
      </div>
    </Button>
  );
};