"use client";

import { formatSeconds } from "@/lib/utils";

type TimerCircleProps = {
  // 0..1 — how much of the circle is filled
  progress: number;
  // big text in the middle (e.g. remaining time)
  label: string;
  sublabel?: string;
  size?: number;
};

export function TimerCircle({
  progress,
  label,
  sublabel,
  size = 260,
}: TimerCircleProps) {
  const stroke = 12;
  const r = (size - stroke) / 2;
  const circumference = 2 * Math.PI * r;
  const clamped = Math.min(1, Math.max(0, progress));

  return (
    <div className="relative" style={{ width: size, height: size }}>
      <svg width={size} height={size} className="-rotate-90">
        <circle
          cx={size / 2}
          cy={size / 2}
          r={r}
          fill="none"
          strokeWidth={stroke}
          className="stroke-muted"
        />
        <circle
          cx={size / 2}
          cy={size / 2}
          r={r}
          fill="none"
          strokeWidth={stroke}
          strokeLinecap="round"
          strokeDasharray={circumference}
          strokeDashoffset={circumference * (1 - clamped)}
          className="stroke-primary transition-[stroke-dashoffset] duration-200 ease-linear"
        />
      </svg>
      <div className="absolute inset-0 flex flex-col items-center justify-center">
        <span className="text-5xl font-bold tabular-nums">{label}</span>
        {sublabel && (
          <span className="mt-1 text-sm text-muted-foreground">{sublabel}</span>
        )}
      </div>
    </div>
  );
}

export function secondsLabel(seconds: number) {
  return formatSeconds(seconds);
}