import {
    Icon,
    IconButton,
    Input,
    InputGroup,
    InputLeftElement,
    InputRightElement,
    Select,
    useControllableState
} from '@chakra-ui/react';

import React from 'react';
import { TbCircleX } from 'react-icons/tb';
import { useTranslation } from 'react-i18next';

interface SearchInputProps {
    icon: React.ReactNode;
    placeholder: string;
    value?: string;
    onChange?: (value: string) => void;
}

const SearchLanguage: React.FC<SearchInputProps> = ({ placeholder, icon, value, onChange }) => {
    const [controlledValue, setControlledValue] = useControllableState({
        value,
        onChange,
        defaultValue: ''
    });
    const { t } = useTranslation();

    return (
        <InputGroup>

            <InputLeftElement pointerEvents="none" children={icon} />

            <Select defaultValue={''} className={value !== '' ? 'active' : ''} placeholder={placeholder} onChange={(e) => setControlledValue(e.target.value)}>
                <option value={"Chinese"}>{t('languages.chinese')}</option>
                <option value={"English"}>{t('languages.english')}</option>
                <option value={"French"}>{t('languages.french')}</option>
                <option value={"German"}>{t('languages.german')}</option>
                <option value={"Japanese"}>{t('languages.japanese')}</option>
                <option value={"Italian"}>{t('languages.italian')}</option>
                <option value={"Portuguese"}>{t('languages.portuguese')}</option>
                <option value={"Spanish"}>{t('languages.spanish')}</option>
                <option value={"Other"}>{t('languages.other')}</option>
                <option value={"input"}>{t('languages.input')}</option>
            </Select>

        </InputGroup>
    );
};

export default SearchLanguage;