import { Link } from '@tanstack/react-router';
import { ArrowLeft } from 'lucide-react';

interface BackLinkProps {
  /** Fallback destination if there's no browser history to go back to (e.g. deep-linked). */
  to: string;
  label: string;
}

/**
 * Browser-history-aware back affordance. Prefers `history.back()` when the
 * router has a previous entry (so a user who deep-linked to an album from
 * Search returns to Search, not to the Albums index); falls back to a
 * normal `<Link>` for direct entries.
 *
 * Detail pages used to hard-code `<Link to="/albums">` which broke that
 * mental model — this fixes it across AlbumDetail / ArtistDetail / Genres.
 */
export function BackLink({ to, label }: BackLinkProps) {
  // window.history.length === 1 means this tab was opened directly to the
  // current URL — there's nothing to go back to, so render a real link.
  const canGoBack = typeof window !== 'undefined' && window.history.length > 1;
  if (canGoBack) {
    return (
      <button
        type="button"
        onClick={() => window.history.back()}
        className="inline-flex items-center gap-1 text-sm text-muted hover:text-text transition-colors"
      >
        <ArrowLeft size={16} /> {label}
      </button>
    );
  }
  return (
    <Link
      to={to}
      className="inline-flex items-center gap-1 text-sm text-muted hover:text-text transition-colors"
    >
      <ArrowLeft size={16} /> {label}
    </Link>
  );
}