Record Button

"use client";

import { useEffect, useState } from "react";
import { cn } from "@/lib/utils";

export interface RecordButtonProps {
  recording?: boolean;
  defaultRecording?: boolean;
  onRecordingChange?: (recording: boolean) => void;
  /** Label when idle. */
  label?: string;
  className?: string;
}

function fmt(s: number) {
  return `${String(Math.floor(s / 60)).padStart(2, "0")}:${String(s % 60).padStart(2, "0")}`;
}

/** Record toggle: glass pill with a red dot that morphs into a stop square, pulsing halo and running timer while recording. */
export function RecordButton({ recording, defaultRecording = false, onRecordingChange, label = "Start recording", className }: RecordButtonProps) {
  const [inner, setInner] = useState(defaultRecording);
  const on = recording ?? inner;
  const [secs, setSecs] = useState(0);

  useEffect(() => {
    if (!on) return;
    const t = window.setInterval(() => setSecs((s) => s + 1), 1000);
    return () => window.clearInterval(t);
  }, [on]);

  return (
    <button
      type="button"
      aria-pressed={on}
      onClick={() => {
        if (!on) setSecs(0);
        setInner(!on);
        onRecordingChange?.(!on);
      }}
      className={cn(
        "da-focus da-transition da-stroke relative inline-flex h-12 items-center gap-3 rounded-da-pill bg-da-surface pr-5 pl-2 font-semibold shadow-da-md backdrop-blur-da backdrop-saturate-150 hover:-translate-y-0.5",
        className,
      )}
    >
      <span className="relative grid size-8 place-items-center rounded-full bg-da-danger/15">
        {on && <span aria-hidden className="absolute inset-0 animate-ping rounded-full bg-da-danger/40 motion-reduce:hidden" />}
        <span
          aria-hidden
          className={cn("relative bg-da-danger transition-all duration-(--da-duration) ease-da", on ? "size-3 rounded-[3px]" : "size-3.5 rounded-full")}
        />
      </span>
      {on ? (
        <span className="font-da-mono tabular-nums">
          <span className="sr-only">Stop recording, elapsed </span>
          {fmt(secs)}
        </span>
      ) : (
        label
      )}
    </button>
  );
}

export default RecordButton;