import React from "react";
import { useTranslation } from "../../i18n";
import { DropdownBox } from "../../dropdown";
import { List } from "../../list";
import { Text } from "../../text";

export const Empty = ({
  offset,
  onCancel,
  emptyText,
}: {
  offset: number;
  onCancel: () => void;
  emptyText?: React.ReactNode;
}) => {
  const t = useTranslation();
  return (
    <DropdownBox style={{ marginLeft: offset }}>
      <List type="option">
        <List.Item onClick={onCancel}>
          <Text theme="label">{emptyText || t.emptyText}</Text>
        </List.Item>
      </List>
    </DropdownBox>
  );
};