import Image from "next/image";

type Props = {
  total: number;
  used: number;
};

const ProgressBar: React.FC<Props> = ({ used, total }) => (
  <div className="flex gap-2.5 items-center p-[10px]">
    <div className="text-xs leading-[18px] gap-0.5 flex items-center">
      <Image src={"icons/app_icon.svg"} width={18} height={18} alt="" />
      Updating
    </div>
    <div className="w-[150px] relative bg-blue-200 h-1 rounded-md flex">
      <div
        className="absolute top-0 left-0 h-full rounded-md bg-blue-600"
        style={{ width: `${((used / total) * 100).toFixed(2)}%` }}
      ></div>
    </div>
    <div className="text-xs leading-[18px]">
      {((used / total) * 100).toFixed(0)}%
    </div>
  </div>
);

export default ProgressBar;