Progress circle

'use client';

import * as React from 'react';
import { ProgressCircle } from './progress-circle';
import type { ProgressCircleSize } from './progress-circle-variants';

const SIZES: ProgressCircleSize[] = ['xxs', 'xs', 'sm', 'md', 'lg'];

export default function ProgressCircleDemo({ replay = 0 }: { replay?: number }) {
  const [storage, setStorage] = React.useState(72);

  React.useEffect(() => {
    if (replay === 0) return;
    setStorage(40);
    const timer = window.setTimeout(() => setStorage(72), 1200);
    return () => window.clearTimeout(timer);
  }, [replay]);

  return (
    // The key remounts the circles on Replay, so every arc sweeps again from 0.
    <div key={replay} className="flex flex-col items-center gap-10">
      <div className="flex flex-wrap items-center justify-center gap-6">
        {SIZES.map((size) => (
          <ProgressCircle
            key={size}
            size={size}
            value={40}
            caption={size === 'xxs' ? 'Users' : 'Active users'}
            aria-label="Active users"
          />
        ))}
      </div>
      <div className="flex flex-wrap items-end justify-center gap-6">
        {SIZES.map((size) => (
          <ProgressCircle
            key={size}
            size={size}
            shape="half-circle"
            value={40}
            caption={size === 'xxs' ? 'Users' : 'Active users'}
            aria-label="Active users"
          />
        ))}
      </div>
      <div className="flex items-center gap-5 rounded-xl border border-secondary bg-primary p-5">
        <ProgressCircle size="xxs" value={storage} aria-labelledby="storage-title" />
        <div className="flex flex-col">
          <span id="storage-title" className="text-sm font-semibold text-primary">
            Storage used
          </span>
          <span className="text-sm text-tertiary">7.2 GB of 10 GB</span>
        </div>
      </div>
    </div>
  );
}