import React from 'react';
import { formatMessage } from '@theorchard/suite-i18n';
import cx from 'classnames';
import { DropdownCustom } from './dropdownCustom';
import type { DropdownCreatableProps, DropdownOption } from './types';
import type { GroupBase } from 'react-select';

const CLASS_NAME = 'DropdownCreatable';

export function DropdownCreatable<
    T extends DropdownOption = DropdownOption,
    M extends boolean = false,
    G extends GroupBase<T> = GroupBase<T>,
>({ className, testId, ...rest }: DropdownCreatableProps<T, M, G>) {
    return (
        <DropdownCustom
            className={cx(CLASS_NAME, className)}
            testId={testId || CLASS_NAME}
            type="SelectCreatable"
            formatCreateLabel={(value) => formatMessage('create_new', { value })}
            {...rest}
        />
    );
}