"use client";

import { Progress } from "@/components/ui/progress";
import type { LabStatusV2 } from "@/lib/api/labs.v2";

type LabCreatingProgressProps = {
  lab: LabStatusV2 & { status: "creating" };
};

export default function LabCreatingProgress(props: LabCreatingProgressProps) {
  const { total, completed } = props.lab.creation_progress;

  const value = (completed / total) * 100;

  return (
    <div className="space-y-2">
      <div className="flex gap-2 items-center">
        <Progress className="flex-1" value={value} />
        <span className="text-xs font-mono">
          {completed} / {total}
        </span>
      </div>
    </div>
  );
}