import React from 'react';
import { formatMessage } from '@theorchard/suite-i18n';
import cx from 'classnames';
import { SearchDropdownCustom } from './searchDropdownCustom';
import type { SearchDropdownCreatableProps } from './types';
import type { DropdownOption } from '../dropdown/types';
import type { GroupBase } from 'react-select';

const CLASS_NAME = 'SearchDropdownCreatable';

export function SearchDropdownCreatable<
    T extends DropdownOption = DropdownOption,
    M extends boolean = false,
    G extends GroupBase<T> = GroupBase<T>,
>({ className, testId, ...rest }: SearchDropdownCreatableProps<T, M, G>) {
    return (
        <SearchDropdownCustom
            className={cx(CLASS_NAME, className)}
            testId={testId ?? CLASS_NAME}
            type="AsyncSelectCreatable"
            formatCreateLabel={(value) => formatMessage('create_new', { value })}
            {...rest}
        />
    );
}