import * as React from "react";
import { BinaryTicker } from "@/src/components/bits/BinaryTicker";
import { BitWipe } from "@/src/components/bits/BitWipe";
import { DecodeText } from "@/src/components/bits/DecodeText";
import { Reveal } from "@/src/components/Reveal";

interface BlockProps {
  /** Two-digit section index, shown with its binary form. */
  index: string;
  label: string;
  title: React.ReactNode;
  id?: string;
  children: React.ReactNode;
}

/**
 * Block: one section of the homepage. A single left axis, one kicker line,
 * one oversized headline, then the content. No sidebars.
 */
export const Block: React.FC<BlockProps> = ({
  index,
  label,
  title,
  id,
  children,
}) => (
  <section
    id={id}
    className="relative scroll-mt-24 border-t border-slate-200 bg-white"
  >
    <div className="mx-auto w-full max-w-[1400px] px-5 py-20 md:px-12 md:py-36">
      <Reveal>
        <div className="mb-8 flex items-center gap-4 md:mb-12">
          <span className="font-mono text-[11px] font-bold tracking-[0.2em] text-slate-900">
            {index}
          </span>
          <span className="h-px w-10 bg-slate-300" />
          <DecodeText
            text={label}
            className="font-mono text-[11px] uppercase tracking-[0.25em] text-slate-500"
          />
          <BinaryTicker
            value={parseInt(index, 10)}
            alive
            className="ml-auto hidden font-mono text-[10px] tracking-[0.3em] text-slate-300 md:block"
          />
        </div>
      </Reveal>
      <BitWipe delay={0.1}>
        <h2 className="m-0 max-w-6xl text-4xl font-bold leading-[0.95] tracking-tighter text-slate-900 md:text-7xl lg:text-[6.5rem]">
          {title}
        </h2>
      </BitWipe>
      <div className="mt-14 md:mt-24">{children}</div>
    </div>
  </section>
);