import type { StoreSiteBlock } from "@alqove/api-client";
import { blockData, str } from "../block-data";
import { normalizeHours } from "../hours";
import { HoursTable } from "../hours-table";
import type { StorefrontRenderContext } from "../links";
import { SectionHeading, StorefrontSection } from "../section";

interface HoursBlockProps {
  block: StoreSiteBlock;
  ctx: StorefrontRenderContext;
}

/**
 * Opening hours live on the site, not the block, so a seller edits them once
 * and every hours block on every page stays in step.
 */
export function HoursBlock({ block, ctx }: HoursBlockProps) {
  const data = blockData(block);
  const heading = str(data, "heading") ?? "Hours";
  const note = str(data, "note");

  return (
    <StorefrontSection surface>
      <div className="max-w-md">
        <SectionHeading>{heading}</SectionHeading>
        <HoursTable rows={normalizeHours(ctx.shell.hours)} />
        {note && (
          <p className="mt-4 text-sm" style={{ color: "var(--sf-muted)" }}>
            {note}
          </p>
        )}
      </div>
    </StorefrontSection>
  );
}