import React from 'react';
import ChevronDownIcon from 'herein-icon/chevron-down';
import type {ICascadeSelectSingleInputProps as Props} from './cascade-select-single-input.type';
import {CascadeSelectSingleInputStyle as S} from './cascade-select-single-input.style';

export const CascadeSelectSingleInputComponent: React.FC<Props> = ({
    value,
    placeholder,
    onClick,
}) => {
    return (
        <S.Container>
            <S.Input onClick={onClick}>
                {!!value ? (
                    <S.Value weight={500} size='textSM'>
                        {value}
                    </S.Value>
                ) : (
                    <S.Placeholder weight={400} size='textSM'>
                        {placeholder}
                    </S.Placeholder>
                )}
            </S.Input>
            <ChevronDownIcon className='text-GRAY-400' />
        </S.Container>
    );
};