"use client";

import * as React from "react";

interface BinaryStreamProps {
  className?: string;
  columns?: number;
  side?: "left" | "right" | "both";
}

export const BinaryStream: React.FC<BinaryStreamProps> = ({
  className = "",
  columns = 4,
  side = "both",
}) => {
  // Generate deterministic binary strings
  const generateColumn = (seed: number) => {
    const chars: string[] = [];
    for (let i = 0; i < 60; i++) {
      chars.push(((seed * 137 + i * 31) % 2).toString());
    }
    return chars.join(" ");
  };

  const renderColumns = (position: "left" | "right") => (
    <div
      className={`absolute top-0 ${position === "left" ? "left-0" : "right-0"} flex gap-3 pointer-events-none select-none overflow-hidden`}
      style={{ height: "100%", width: `${columns * 16}px` }}
    >
      {Array.from({ length: columns }).map((_, i) => {
        const offset = position === "left" ? i : i + columns;
        const duration = 20 + (i % 3) * 8;
        const delay = i * 2.5;
        return (
          <div
            key={`${position}-${i}`}
            className="binary-column text-[10px] font-mono leading-[1.6] whitespace-pre tracking-widest"
            style={{
              color: "rgba(203, 213, 225, 0.12)",
              writingMode: "vertical-lr",
              animation: `binary-scroll ${duration}s linear ${delay}s infinite`,
              animationFillMode: "backwards",
            }}
          >
            {generateColumn(offset + 42)}
            {"\n"}
            {generateColumn(offset + 99)}
          </div>
        );
      })}
    </div>
  );

  return (
    <div
      className={`absolute inset-0 pointer-events-none overflow-hidden ${className}`}
      aria-hidden="true"
    >
      {(side === "left" || side === "both") && renderColumns("left")}
      {(side === "right" || side === "both") && renderColumns("right")}
    </div>
  );
};
