"use client";

import { useSyncExternalStore } from "react";
import { textLink } from "./button-styles";
import { isFiscalNoticeActive } from "./fiscal-notice";
import HoverPrefetchLink from "./HoverPrefetchLink";

/** A data não muda enquanto a página está aberta: nada a observar. */
const subscribe = () => () => {};

/**
 * Faixa datada da nota fiscal, acima dos cartões da home. Quem a coloca na página (WorkModalities) só a renderiza dentro
 * do prazo; aqui o navegador confere a data de novo, porque a home é gerada no build: depois do prazo ela some sem um
 * build novo. Na hidratação vale o valor do servidor (visível), e só depois a data do navegador: sem aviso de hidratação.
 */
export function FiscalNotice({ href }: Readonly<{ href: string }>) {
  const active = useSyncExternalStore(
    subscribe,
    () => isFiscalNoticeActive(new Date()),
    () => true,
  );
  if (!active) return null;

  return (
    <div className="mb-sp-6 flex flex-col gap-sp-1 border-y border-[var(--border)] py-sp-4 md:flex-row md:items-baseline md:gap-sp-4">
      <p className="font-display text-[15px] leading-6 text-[var(--ink-80)]">
        <strong className="font-semibold text-[var(--ink)]">
          Seu sistema emite nota fiscal?
        </strong>{" "}
        Os optantes do Simples Nacional entram na reforma tributária em 1º de
        janeiro de 2027.
      </p>
      <HoverPrefetchLink
        href={href}
        className={`${textLink} shrink-0 self-start text-[var(--ink-80)]`}
      >
        Ver o que muda
      </HoverPrefetchLink>
    </div>
  );
}