import { Progress } from "@/components/ui/progress"

export function ProgressDemo() {
  return (
    <div className="grid w-full max-w-md gap-6">
      <Progress
        aria-label="Upload progress"
        helperText="Preparing the final file"
        label="Upload"
        optional="(Optional)"
        showInfo
        showSpinner
        value={40}
      />

      <Progress
        aria-label="Storage usage"
        label="Storage"
        labelPosition="bottom"
        value={68}
      />

      <div dir="rtl">
        <Progress
          aria-label="Arabic upload progress"
          indicator="40%"
          label="\u0639\u0646\u0648\u0627\u0646"
          optional="\u0028\u0627\u062e\u062a\u064a\u0627\u0631\u064a\u0029"
          showInfo
          showSpinner
          size="sm"
          value={40}
        />
      </div>
    </div>
  )
}
