import Link from 'next/link';
import Image from 'next/image';
import ThemeToggle from './ThemeToggle';

// AppSidebar (which carries the logo) is `hidden lg:flex` — invisible on
// mobile, so mobile pages had no branding/way back to home at all. This is
// the mobile-only equivalent: a slim bar with just the logo. Deliberately
// not sticky — it scrolls away with the page content instead of staying
// pinned to the top.
export default function MobileTopBar() {
  return (
    <div className="lg:hidden relative bg-[rgb(20_113_76)] dark:bg-gray-900 border-b border-[rgb(16_89_60)] dark:border-gray-800 px-4 h-16 flex items-center flex-shrink-0">
      <Link href="/" className="flex items-center hover:opacity-80 transition-opacity" aria-label="Go to home">
        <Image
          src="/edr-logo.png"
          alt="Ethio-Djibouti Railway"
          width={140}
          height={48}
          className="h-14 w-auto"
          priority
        />
      </Link>
      <div className="ml-auto">
        <ThemeToggle />
      </div>
    </div>
  );
}
