import React from "react";
import { useConfig } from "../../_util/config-context";
import { useTranslation } from "../../i18n";
import { DropdownBox } from "../../dropdown";

export const Loading = ({ offset }: { offset?: number }) => {
  const t = useTranslation();
  const { classPrefix } = useConfig();
  return (
    <DropdownBox style={{ marginLeft: offset }}>
      <ul className={`${classPrefix}-option-list`} role="menu">
        <li role="presentation" className="is-disabled">
          <div role="menuitem" className={`${classPrefix}-option-list__item`}>
            {t.loadingText}
          </div>
        </li>
      </ul>
    </DropdownBox>
  );
};