frontend/src/components/layout/MobileBackButton.tsx

'use client';

import { useRouter } from 'next/navigation';

interface MobileBackButtonProps {
  label?: string;
  fallbackHref?: string;
  alwaysShow?: boolean;
}

export function MobileBackButton({ label, fallbackHref, alwaysShow = false }: MobileBackButtonProps) {
  const router = useRouter();

  const handleBack = () => {
    if (window.history.length > 1) {
      router.back();
    } else if (fallbackHref) {
      router.push(fallbackHref);
    } else {
      router.push('/');
    }
  };

  return (
    <button
      onClick={handleBack}
      className={`${alwaysShow ? 'flex' : 'lg:hidden flex'} items-center gap-2 mb-4 hover:opacity-70 transition-opacity cursor-pointer`}
    >
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
        <path d="M19 12H5M5 12L12 19M5 12L12 5" stroke="#00293D" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
      {label && (
        <span className="font-fractul font-medium text-[14px] text-[#00293D]">{label}</span>
      )}
    </button>
  );
}