"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useFulfillment } from "@/context/fulfillment-context";

export function AnnouncementBar() {
  const pathname = usePathname();
  const { store, openChooser } = useFulfillment();
  if (pathname.startsWith("/admin")) return null;

  return (
    <div className="silo-chrome border-b border-[color-mix(in_srgb,var(--straw)_40%,transparent)] bg-[var(--spruce)] text-[var(--on-brand)]">
      <div className="mx-auto flex h-9 w-full max-w-[1280px] items-center justify-between gap-3 px-3 text-[11px] sm:px-6 lg:px-8">
        <p className="truncate">
          Crib circular out now · Silo Drops 8/13–8/19 ·{" "}
          <Link href="/weekly" className="font-semibold underline underline-offset-2">
            Read the Crib
          </Link>
        </p>
        <button
          type="button"
          onClick={openChooser}
          className="hidden shrink-0 font-semibold sm:inline"
        >
          Shopping {store.name}
        </button>
      </div>
    </div>
  );
}