"use client";
import { useEffect, useState } from 'react';

export function SpinnerIcon() {
  return (
    <svg width="11" height="11" viewBox="0 0 11 11" fill="none">
      <circle cx="5.5" cy="5.5" r="4" stroke="currentColor" strokeWidth="1.5" strokeDasharray="6 4" strokeLinecap="round">
        <animateTransform attributeName="transform" type="rotate" from="0 5.5 5.5" to="360 5.5 5.5" dur="0.75s" repeatCount="indefinite"/>
      </circle>
    </svg>
  );
}

export function CheckIcon() {
  return (
    <svg width="11" height="11" viewBox="0 0 11 11" fill="none">
      <path d="M2 5.5L4.5 8L9 3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

export function StepXIcon() {
  return (
    <svg width="11" height="11" viewBox="0 0 11 11" fill="none">
      <path d="M2.5 2.5L8.5 8.5M8.5 2.5L2.5 8.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
    </svg>
  );
}

export function ElapsedTime({ startTime }) {
  const [secs, setSecs] = useState(0);
  useEffect(() => {
    setSecs(Math.floor((Date.now() - startTime) / 1000));
    const id = setInterval(() => setSecs(s => s + 1), 1000);
    return () => clearInterval(id);
  }, [startTime]);
  if (secs < 60) return <>{secs}s</>;
  return <>{Math.floor(secs / 60)}m {secs % 60}s</>;
}
