I have a functional component setup, and I want to create a default prop that can be interchanged. I did this by enums, however I want to change the enum to types but I get an error. Can someone explain how this works and what is going on here?
export enum NumberCircleStatus { incomplete = 'incomplete', complete = 'complete',}export interface INumberCircleProps { status: NumberCircleStatus;}export const NumberCircle: React.FC<INumberCircleProps> = ({ status, ...props}): React.ReactElement => ( // eslint-disable-next-line react/jsx-props-no-spreading<Container {...props}><TextCircle style={status}><OrderText style={status}>{props.children}</OrderText></TextCircle></Container>);const Container = styled.View``;interface ITextCircleProps { style: NumberCircleStatus;}const TextCircle = styled(Circle).attrs(() => ({ size: CircleSizes.large, type: CircleTypes.primary,}))<ITextCircleProps>` ${({style}) => ({ [NumberCircleStatus.complete]: complete, [NumberCircleStatus.incomplete]: incomplete, }[style])};`;const complete = css` background-color: ${({theme}) => theme.colors.red}; border: ${({theme}) => theme.colors.border}}; border-width: 3px;`;const incomplete = css` background-color: ${({theme}) => theme.colors.background}; border: ${({theme}) => theme.colors.border}}; border-width: 3px;`;I want to change
export enum NumberCircleStatus { incomplete = 'incomplete', complete = 'complete',}to export type as I was told type is more appropriate in this sense, but I am getting an error with how I mapped incomplete and incomplete to style in TextCircle. Can someone explain how using enums here is working and how I could replace that with type?