import type { ReactNode } from 'react'
import DarkModeToggle from './DarkModeToggle'

interface Props {
  titulo: string
  acciones?: ReactNode
}

/** Barra superior de la app: marca a la izquierda, acciones a la derecha */
export default function AppHeader({ titulo, acciones }: Props) {
  return (
    <header className="sticky top-0 z-10 border-b border-[#E5E7EB] bg-white/95 backdrop-blur dark:border-[#1E293B] dark:bg-[#1E293B]/95">
      <div className="flex min-h-14 flex-wrap items-center gap-x-3 gap-y-2 px-4 py-2 sm:px-6 lg:px-8">
        <a
          href="/"
          className="rounded-lg px-2 py-1.5 text-xs font-medium text-[#64748B] dark:text-[#94A3B8] transition-all duration-100 ease-out hover:bg-[#F9FAFB] hover:text-[#111827] dark:text-[#E2E8F0]"
        >
          &larr; Menú
        </a>
        <span className="text-sm font-bold tracking-widest text-[#111827] dark:text-[#E2E8F0]">
          FRASA<span className="text-[#F97316]">.</span>
        </span>
        <h1 className="text-xl font-semibold text-[#111827] dark:text-[#E2E8F0]">{titulo}</h1>
        <div className="ml-auto flex items-center gap-3">
          <DarkModeToggle />
          {acciones}
        </div>
      </div>
    </header>
  )
}