import ComponentCard from "../../../components/common/ComponentCard";
import PageMeta from "../../../components/common/PageMeta";
import { ProgressBar } from "../../../components/ui/progress";

export default function Progressbar() {
  return (
    <>
      <PageMeta
        title="React.js Progressbar Dashboard | TailAdmin - React.js Admin Dashboard Template"
        description="This is React.js Progressbar Dashboard page for TailAdmin - React.js Tailwind CSS Admin Dashboard Template"
      />
      <div className="space-y-5 sm:space-y-6">
        <ComponentCard title="Progress Bar Sizes">
          <div className="space-y-6">
            <div>
              <p className="text-sm text-gray-500 dark:text-gray-400 mb-2">
                Small
              </p>
              <ProgressBar value={75} size="sm" />
            </div>
            <div>
              <p className="text-sm text-gray-500 dark:text-gray-400 mb-2">
                Medium
              </p>
              <ProgressBar value={75} size="md" />
            </div>
            <div>
              <p className="text-sm text-gray-500 dark:text-gray-400 mb-2">
                Large
              </p>
              <ProgressBar value={75} size="lg" />
            </div>
          </div>
        </ComponentCard>

        <ComponentCard title="Progress Bar Colors">
          <div className="space-y-6">
            <ProgressBar value={60} color="primary" showLabel />
            <ProgressBar value={75} color="success" showLabel />
            <ProgressBar value={45} color="error" showLabel />
            <ProgressBar value={80} color="warning" showLabel />
            <ProgressBar value={65} color="info" showLabel />
          </div>
        </ComponentCard>

        <ComponentCard title="Progress Bar with Label">
          <div className="space-y-6">
            <ProgressBar
              value={50}
              color="primary"
              showLabel
              label="Upload Progress"
            />
            <ProgressBar
              value={75}
              color="success"
              showLabel
              label="Download Progress"
            />
          </div>
        </ComponentCard>
      </div>
    </>
  );
}

