import { Link } from "@tanstack/react-router";
import { Globe, Accessibility, Phone, AlertTriangle } from "lucide-react";

export function UtilityBar() {
  return (
    <div className="bg-navy-darker text-white/90 text-xs">
      <div className="mx-auto max-w-7xl px-4 md:px-8 flex items-center justify-between h-9 gap-4">
        <div className="flex items-center gap-2 min-w-0">
          <AlertTriangle className="h-3.5 w-3.5 text-accent shrink-0" aria-hidden />
          <Link to="/news" className="truncate hover:text-accent transition-colors">
            Public Notice: 16th Circuit closed Mon, Dec 25 for Christmas Day
          </Link>
        </div>
        <div className="hidden md:flex items-center gap-5 shrink-0">
          <a href="tel:8168816900" className="flex items-center gap-1.5 hover:text-accent transition-colors">
            <Phone className="h-3.5 w-3.5" aria-hidden /> (816) 881-6900
          </a>
          <button className="flex items-center gap-1.5 hover:text-accent transition-colors" aria-label="Language selector">
            <Globe className="h-3.5 w-3.5" aria-hidden /> EN
          </button>
          <button className="flex items-center gap-1.5 hover:text-accent transition-colors" aria-label="Accessibility options">
            <Accessibility className="h-3.5 w-3.5" aria-hidden /> Accessibility
          </button>
          <span className="h-3 w-px bg-white/20" aria-hidden />
          <Link to="/contact" className="font-semibold uppercase tracking-wider text-[11px] hover:text-accent transition-colors">
            Contact Us
          </Link>
          <Link to="/resources" className="font-semibold uppercase tracking-wider text-[11px] hover:text-accent transition-colors">
            Employment
          </Link>
        </div>
      </div>
    </div>
  );
}