import React from 'react';
import { Box } from '../Box';
import { Text } from '../Text';
import { useTheme } from '../../theme/ThemeProvider';
import { Normalize } from '../../utils/normalize';
import type { Props } from '.';

export const Bar = ({
  backgroundColor,
  height,
  innerColor,
  marginVertical,
  percent,
  text,
}: Props) => {
  const { fonts } = useTheme();

  return (
    <Box
      position={'relative'}
      justifyContent={'center'}
      alignItems={'center'}
      width={'100%'}
      height={height}
      borderRadius={50}
      backgroundColor={backgroundColor}
      marginVertical={marginVertical}
    >
      <Box
        position={'absolute'}
        width={percent >= 100 ? 100 + '%' : percent + '%'}
        height={'100%'}
        left={0}
        borderRadius={50}
        backgroundColor={innerColor}
      />
      <Text
        variant={'label'}
        lineHeight={Normalize(12)}
        fontFamily={fonts.caustenRoundBold}
        color={'white'}
      >
        {text}
      </Text>
    </Box>
  );
};