← snapshot

"use client";

import type { LabState } from "./lab-types";

/**
 * Pure CSS 3D — no canvas, no GPU shader, no library. Nested elements in a
 * `preserve-3d` scene. Included because it is the only option here that
 * costs nothing, scales to any DPI for free, and degrades to something
 * sensible with JavaScript disabled.
 */
export type CssVariantId = "css-armillary";

export function CssTile({
  size,
  state,
}: {
  variant: CssVariantId;
  size: number;
  state: React.RefObject<LabState>;
  active: boolean;
}) {
  const thread = state.current?.thread ?? [0.54, 0.65, 0.88];
  const rgb = `${Math.round(thread[0] * 255)}, ${Math.round(thread[1] * 255)}, ${Math.round(thread[2] * 255)}`;

  return (
    <div
      className="jac-css-orb"
      style={
        {
          width: size,
          height: size,
          "--css-orb-rgb": rgb,
        } as React.CSSProperties
      }
    >
      <div className="jac-css-scene">
        {[0, 1, 2, 3].map((i) => (
          <div
            key={i}
            className="jac-css-ring"
            style={
              {
                "--i": String(i),
                width: `${52 + i * 14}%`,
                height: `${52 + i * 14}%`,
              } as React.CSSProperties
            }
          />
        ))}
        <div className="jac-css-core" />
      </div>
    </div>
  );
}