import React, { useMemo } from 'react'
import { ArrowLeft } from 'lucide-react'
import { useNavReturn } from '../hooks/useNavReturn'

/**
 * App-typischer Zurück-Schalter (kein Router-Link) — nutzt appReturn / History / Fallback.
 */
export default function PageReturnButton({
  fallbackPath,
  fallbackLabel,
  className = 'page-return-btn btn btn-secondary btn-small',
}) {
  const fallback = useMemo(
    () =>
      fallbackPath && fallbackLabel
        ? { path: fallbackPath, label: fallbackLabel }
        : null,
    [fallbackPath, fallbackLabel]
  )
  const { goBack, target } = useNavReturn(fallback)

  if (!target?.label) return null

  return (
    <button type="button" className={className} onClick={goBack} aria-label={target.label}>
      <ArrowLeft size={16} strokeWidth={2.25} className="page-return-btn__icon" aria-hidden />
      <span>{target.label}</span>
    </button>
  )
}