import { ChevronRightIcon } from '@heroicons/react/24/outline';
import { useGoBack } from '../../hooks/useGoBack';

interface Props {
  /** مقصد وقتی تاریخچه‌ای برای برگشتن نیست (ورود مستقیم/رفرش) — معمولاً صفحهٔ لیستِ همان بخش. */
  fallback: string;
  label?: string;
}

/**
 * دکمهٔ «بازگشت» — یک ظاهر و یک رفتار در همهٔ صفحاتی که از دل صفحهٔ دیگری باز می‌شوند.
 * ظاهر مرجع، همان دکمهٔ بازگشتِ صفحهٔ سرویس‌هاست (`cp-btn-secondary` با ارتفاع ۳۶).
 * در RTL، فلشِ «قبلی» راست‌سو است.
 */
export default function BackButton({ fallback, label = 'بازگشت' }: Props) {
  const goBack = useGoBack(fallback);

  return (
    <button type="button" className="cp-btn-secondary" style={{ height: 36 }} onClick={goBack}>
      <ChevronRightIcon style={{ width: 16 }} /> {label}
    </button>
  );
}