"use client";

import { useState } from "react";
import { useI18n } from "@/translations/provider";
import { LoadingSkeleton } from "./loading-skeleton";
import { LoadingThreeDot } from "./loading-three-dot";

type SwipeButtonProps = {
  onSuccess: () => void;
  onCancel?: () => void;
  text: string;
  cancelText?: string;
  disabled?: boolean;
  isLoading?: boolean;
  theme?: "default" | "green";
};

export function SwipeButton({
  onSuccess,
  onCancel,
  text,
  cancelText,
  disabled = false,
  isLoading = false,
  theme = "default",
}: SwipeButtonProps) {
  const { dictionary: t } = useI18n();
  const [clicked, setClicked] = useState(false);

  if (isLoading) {
    if (onCancel) {
      return (
        <div className="flex w-full items-center gap-3">
          <LoadingSkeleton className="flex-1 h-[52px] rounded-[11px]" />
          <LoadingSkeleton className="flex-1 h-[52px] rounded-[11px]" />
        </div>
      );
    }
    return (
      <div className="w-full flex">
        <LoadingSkeleton className="w-full h-[52px] rounded-[11px]" />
      </div>
    );
  }

  const handleClick = () => {
    setClicked(true);
    onSuccess();
  };

  const cancelLabel = cancelText || t?.["Cancel"] || "Cancel";
  const isGreen = theme === "green";
  const buttonBg = isGreen ? "bg-[#00AC78]" : "bg-[#F0445B]";

  const actionButton = (
    <button
      type="button"
      disabled={disabled || clicked}
      onClick={handleClick}
      className={`flex-1 h-[52px] rounded-[11px] ${buttonBg} text-white font-semibold group-16 flex items-center justify-center cursor-pointer transition-all active:scale-[0.98] hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed`}
    >
      {clicked ? <LoadingThreeDot /> : text}
    </button>
  );

  if (onCancel) {
    return (
      <div className="flex w-full items-center gap-3">
        {/* Cancel Button */}
        <button
          type="button"
          onClick={onCancel}
          className="flex-1 h-[52px] rounded-[11px] border border-[#8B8B8B] bg-transparent text-[#8B8B8B] font-semibold group-16 flex items-center justify-center cursor-pointer transition-all active:scale-[0.98] hover:opacity-90"
        >
          {cancelLabel}
        </button>

        {/* Action Button */}
        {actionButton}
      </div>
    );
  }

  // Single Button full width
  return <div className="w-full flex">{actionButton}</div>;
}

export default SwipeButton;