import * as stylex from "@stylexjs/stylex";
import { useEffect, useState } from "react";

import { ProgressCircle } from "../../components/progress-circle";

const styles = stylex.create({
  wrapper: {
    gap: "8px",
    display: "flex",
    flexDirection: "column",
  },
});

export function Basic() {
  const [value, setValue] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setValue((prev) => {
        const newVal = Math.min(100, prev + 10 * Math.random());

        if (newVal === 100) {
          clearInterval(interval);
        }

        return newVal;
      });
    }, 500);
  }, []);

  return (
    <div {...stylex.props(styles.wrapper)}>
      <ProgressCircle value={value} aria-label="Progress" />
    </div>
  );
}