"use client"

import Link from "next/link"
import { Globe, ArrowRight } from "lucide-react"

/**
 * Aviso para las pantallas globales de administración.
 *
 * El proyecto tiene dos versiones de pedidos, mesas y productos: una global con
 * selector «Todas las sedes» y una por sede. No son duplicados —la global sirve
 * para mirar las dos sedes juntas— pero durante meses nadie documentó cuál era
 * cuál, y derivaron: la por sede ganó tiempo real y funciones que la global no
 * tiene.
 *
 * La regla, desde agosto de 2026: **la global es para mirar, la de la sede es
 * para trabajar**. Este cartel lo dice en pantalla, que es donde hace falta.
 */
export function VistaGlobalBanner({
  que,
  sedeSugerida = "sport-bar",
  rutaSede,
}: {
  /** Qué se está mirando, en minúscula: "los pedidos", "las mesas". */
  que: string
  sedeSugerida?: string
  /** Ruta dentro de la sede, ej. "/pedidos". */
  rutaSede: string
}) {
  return (
    <div className="mb-4 rounded-lg border border-verde-bosque/20 bg-verde-bosque/5 px-4 py-3">
      <div className="flex flex-wrap items-center gap-x-3 gap-y-1.5">
        <Globe className="h-4 w-4 shrink-0 text-verde-bosque" />
        <p className="text-sm text-gray-700">
          <span className="font-semibold text-verde-bosque">Resumen de todas las sedes.</span>{" "}
          Vista de consulta: acá se miran {que} de los dos locales juntos, pero no se modifican.
        </p>
        <Link
          href={`/admin/${sedeSugerida}${rutaSede}`}
          className="inline-flex items-center gap-1 text-sm font-medium text-naranja-vip hover:underline"
        >
          Ir a la sede para operar
          <ArrowRight className="h-3.5 w-3.5" />
        </Link>
      </div>
    </div>
  )
}