import { QuoteLabel } from "./QuoteLabel";

// Same visual language as RichText.tsx's Quote converter (Caveat script +
// brand divider) — extracted here so PageBlocks.tsx (and any future hand-
// written page) can reuse it instead of each page defining its own copy,
// which is what /lebensuhr, /3x3-system, and /ueber-mich each did before
// this existed. `label` was dropped in that extraction (this component had
// no prop for it at all) — QuoteBlock.label was set in the admin but never
// actually reached the page, unlike RichText.tsx's own local Quote, which
// this now matches.
export function Quote({ label, children }: { label?: string | null; children: React.ReactNode }) {
  return (
    <div className="relative flex items-start gap-6 w-full my-2">
      {label && <QuoteLabel label={label} />}
      <div className="w-px self-stretch bg-brand shrink-0" />
      <p className="text-text-primary text-[1.75rem] leading-[1.1] flex-1" style={{ fontFamily: "var(--font-caveat)" }}>
        {children}
      </p>
    </div>
  );
}