import { Progress } from '@primitivekit/react';

<Progress value={50} />

<Progress size="small" value={30} />
<Progress size="medium" value={50} />
<Progress size="large" value={70} />

<Progress colorScheme="primary" value={25} />
<Progress colorScheme="success" value={50} />
<Progress colorScheme="warning" value={75} />
<Progress colorScheme="danger" value={90} />

<Progress value={60} showLabel />

<Progress value={70} striped />

<Progress value={80} striped animated />

<Progress indeterminate />

<Progress
  value={65}
  style={{
    '--progress-height': '12px',
    '--progress-bg': 'rgba(230, 230, 230, 1)',
    '--progress-fill-bg': 'rgba(0, 200, 0, 1)',
    '--progress-border-radius': '10px',
  }}
/>

function FileUpload() {
  const [progress, setProgress] = useState(0);

  const handleUpload = async (file) => {
    // Simulate upload progress
    const interval = setInterval(() => {
      setProgress(prev => {
        if (prev >= 100) {
          clearInterval(interval);
          return 100;
        }
        return prev + 10;
      });
    }, 500);
  };

  return (
    <div>
      <Progress value={progress} showLabel />
      <p>{progress === 100 ? 'Upload complete!' : 'Uploading...'}</p>
    </div>
  );
}

function MultiStepForm() {
  const [step, setStep] = useState(1);
  const totalSteps = 4;
  const progress = (step / totalSteps) * 100;

  return (
    <div>
      <Progress value={progress} showLabel />
      <p>Step {step} of {totalSteps}</p>
    </div>
  );
}