import { FlexContainer } from "@/components/shared/components"
import { useThemeContext } from "@/providers/themeProvider"

export default function CompletionBar({
  percentage = 0,
  color,
}: {
  percentage: number
  color: string
}) {
  const { theme } = useThemeContext()

  return (
    <FlexContainer
      borderRadius={0.9}
      bgColor={theme.colors.black}
      borderColor={theme.colors.gray600}
      gap={0.2}
      width={100}
      padding="0.4rem"
    >
      <FlexContainer
        style={{ minHeight: "4px" }}
        width={percentage}
        bgColor={color}
        borderRadius={1.6}
      />
      {percentage !== 100 && (
        <FlexContainer
          flex={false}
          borderRadius={1.6}
          style={{ minHeight: "4px" }}
          width={100 - percentage}
          bgColor={theme.colors.gray600}
        />
      )}
    </FlexContainer>
  )
}