"use client";

import * as React from "react";
import { ProgressWithValue } from "./progress-with-value";

export function ProgressWithValueDemo() {
  const [value, setValue] = React.useState(45);

  React.useEffect(() => {
    const timer = setInterval(() => {
      setValue((prevValue) => {
        const newValue = prevValue + 5;
        if (newValue >= 100) {
          return 0;
        }
        return newValue;
      });
    }, 1000);

    return () => {
      clearInterval(timer);
    };
  }, []);

  return (
    <div className="flex flex-col space-y-10">
      <div className="space-y-2">
        <h3 className="text-lg font-medium">Default (End Position)</h3>
        <ProgressWithValue value={value} />
      </div>

      <div className="space-y-2">
        <h3 className="text-lg font-medium">Start Position</h3>
        <ProgressWithValue value={value} position="start" />
      </div>

      <div className="space-y-2">
        <h3 className="text-lg font-medium">Start Outside Position</h3>
        <ProgressWithValue value={value} position="start-outside" />
      </div>

      <div className="space-y-2">
        <h3 className="text-lg font-medium">Follow Position</h3>
        <ProgressWithValue value={value} position="follow" />
      </div>

      <div className="space-y-2">
        <h3 className="text-lg font-medium">End Outside Position</h3>
        <ProgressWithValue value={value} position="end-outside" />
      </div>

      <div className="space-y-2">
        <h3 className="text-lg font-medium">Custom Label Function</h3>
        <ProgressWithValue
          value={value}
          label={(val) => `${val}/100 completed`}
          position="end-outside"
          valueClassName="font-semibold text-sm"
        />
      </div>
    </div>
  );
}