import React from 'react';
import {BadgeComponent as Badge} from '../../atoms';
import type {ITreeSelectInput as Props} from './tree-select-input.type';
import {TreeSelectInputStyle as S} from './tree-select-input.style';

export const TreeSelectInputComponent: React.FC<Props> = ({
    text,
    clearBadgeText = 'Clear all filters',
    placeholder,
    showCleanButton,
    onClick,
    onClean,
}) => {
    return (
        <S.Container>
            <S.Input onClick={onClick}>
                {showCleanButton ? (
                    <S.Text weight={500} size='textSM'>
                        {text}
                    </S.Text>
                ) : (
                    <S.Placeholder weight={400} size='textSM'>
                        {placeholder}
                    </S.Placeholder>
                )}
            </S.Input>
            {showCleanButton && (
                <Badge
                    color='gray'
                    size='md'
                    text={clearBadgeText}
                    closeIcon={{
                        show: true,
                        props: {onClick: onClean},
                    }}
                />
            )}
        </S.Container>
    );
};