import * as ProgressPrimitive from "@radix-ui/react-progress";
import { cn } from "@/lib/utils";
import React from "react";

const ProgressMeta = ({
  conclusaoMeta,
  className,
  value,
  ...props
}: {
  conclusaoMeta: number;
  className?: string;
  value?: any;
  ref?: React.RefObject<any>;
}) => {
  const percentUsed = conclusaoMeta ?? 0;

  return (
    <>
      <ProgressPrimitive.Root
        className={cn(
          "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
          className,
        )}
        {...props}
      >
        <ProgressPrimitive.Indicator
          className="h-full w-full flex-1 bg-primary transition-all"
          style={{
            transform: `translateX(-${100 - percentUsed}%)`,
          }}
        />
        <div className="absolute inset-0 flex items-center justify-center text-white select-none">
          {percentUsed}% {/* Exibe o percentual */}
        </div>
      </ProgressPrimitive.Root>
      <div className="w-full flex flex-row justify-between text-black-2"></div>
    </>
  );
};

ProgressMeta.displayName = ProgressPrimitive.Root.displayName;

export { ProgressMeta };