"use client";

import { useRouter } from "next/navigation";
import "./BackButton.css";

type Props = {
  fallbackPath?: string;
  variant?: "default" | "top";
  className?: string;
};

export function BackButton({ fallbackPath = "/", variant = "default", className }: Props) {
  const router = useRouter();

  const handleBack = () => {
    if (window.history.state && window.history.length > 1) {
      router.back();
    } else {
      router.push(fallbackPath);
    }
  };

  const variantClass = variant === "top" ? "BackButton-top" : "";
  const classes = ["BackButton", variantClass, className].filter(Boolean).join(" ");

  return (
    <button onClick={handleBack} className={classes}>
      ← back
    </button>
  );
}
