import type { CheckinBrandingData } from "@alqove/api-client";

/**
 * Shown for the 423 (store paused/suspended) state, or when branding loads but
 * reports the lane disabled/paused. Friendly, non-technical copy — this is a
 * public consumer surface. Surfaces store name + hours when we have them.
 */
export function StorePausedNotice({
  branding,
}: {
  branding?: Pick<CheckinBrandingData, "name" | "hours"> | null;
}) {
  return (
    <main className="flex flex-1 items-center justify-center px-6 py-16">
      <div className="max-w-sm text-center">
        <div className="mb-4 text-4xl" aria-hidden="true">
          ⏸️
        </div>
        <h1 className="text-xl font-semibold text-slate-900">
          {branding?.name ?? "This store"} is not accepting check-ins
          right now
        </h1>
        <p className="mt-3 text-sm text-slate-600">
          They&apos;ve paused remote check-in for the moment. Please check back a
          little later, or come by in person.
        </p>
        {branding?.hours ? (
          <p className="mt-4 text-sm font-medium text-slate-700">
            Hours: {branding.hours}
          </p>
        ) : null}
      </div>
    </main>
  );
}