"use client";

import { ChevronLeft } from "lucide-react";
import Link, { type LinkProps } from "next/link";

import styles from "./back-button.module.css";

interface BackButtonBaseProps {
  className?: string;
  ariaLabel?: string;
  iconSize?: number;
  variant?: "floating" | "soft" | "ghost";
}

type BackButtonLinkProps = BackButtonBaseProps & {
  href: LinkProps["href"];
  onClick?: never;
};

type BackButtonActionProps = BackButtonBaseProps & {
  href?: never;
  onClick: () => void;
};

export type BackButtonProps = BackButtonLinkProps | BackButtonActionProps;

export function BackButton({
  href,
  onClick,
  className,
  ariaLabel = "Back",
  iconSize = 24,
  variant = "floating",
}: BackButtonProps) {
  const buttonClassName = [
    styles.backButton,
    styles[variant],
    className,
  ]
    .filter(Boolean)
    .join(" ");
  const icon = (
    <ChevronLeft size={iconSize} strokeWidth={2.5} aria-hidden="true" />
  );

  if (href) {
    return (
      <Link href={href} className={buttonClassName} aria-label={ariaLabel}>
        {icon}
      </Link>
    );
  }

  return (
    <button
      type="button"
      className={buttonClassName}
      onClick={onClick}
      aria-label={ariaLabel}
    >
      {icon}
    </button>
  );
}
