"use client";

import React from "react";
import { useRouter } from "next/navigation";
import { ChevronLeft } from "lucide-react";
import { cn } from "../lib/utils";

interface BackButtonProps {
  className?: string;
  label?: string;
}

export default function BackButton({ className, label = "بازگشت" }: BackButtonProps) {
  const router = useRouter();

  const handleBack = () => {
    // router.back() preserves browser history and scroll position natively
    if (typeof window !== "undefined" && window.history.length > 1) {
      router.back();
    } else {
      router.push("/");
    }
  };

  return (
    <button
      type="button"
      onClick={handleBack}
      className={cn(
        "inline-flex items-center gap-1.5 px-4 py-2 bg-white/80 backdrop-blur-sm border border-medical-gray-200 hover:border-canina-blue hover:text-canina-blue text-medical-gray-700 text-xs font-black rounded-xl transition-all shadow-xs active:scale-95 whitespace-nowrap cursor-pointer font-vazir",
        className
      )}
    >
      <span>{label}</span>
      <ChevronLeft className="w-4 h-4" />
    </button>
  );
}