import { View } from 'react-native';
import styled from '@emotion/native';
import type { ViewProps } from 'react-native';

const StyledContainer = styled(View)<ViewProps>(({ theme }) => ({
  flexDirection: 'row',
  borderRadius: theme.__hd__.progress.radii.default,
}));

const StyledDonutCircle = styled(View)<ViewProps>(({ theme }) => ({
  position: 'absolute',
  top: theme.__hd__.progress.sizes.circleCompletenessHeight,
  left: theme.__hd__.progress.sizes.circleCompletenessHeight,
  width:
    theme.__hd__.progress.sizes.circleDiameter -
    theme.__hd__.progress.sizes.circleCompletenessHeight * 2,
  height:
    theme.__hd__.progress.sizes.circleDiameter -
    theme.__hd__.progress.sizes.circleCompletenessHeight * 2,
  zIndex: 3,
  borderRadius: theme.__hd__.progress.radii.default,
  alignItems: 'center',
  justifyContent: 'center',
}));

export { StyledContainer, StyledDonutCircle };