import { lazy, forwardRef, Suspense } from 'react';
import { Select, SelectProps } from 'components/inputs/Select';

export const SelectCountry = lazy(() => import('./SelectCountry'));

export const SelectCountryLazy = forwardRef<HTMLSelectElement, SelectProps>(
  ({ placeholder = 'Country', ...props }, ref) => {
    return (
      <Suspense
        fallback={
          <Select placeholder={placeholder} {...props} ref={ref} disabled />
        }
      >
        <SelectCountry placeholder={placeholder} {...props} ref={ref} />
      </Suspense>
    );
  }
);

export default SelectCountry;