import React from 'react';
import { EmptyState } from '@wix/design-system';
import { observer } from 'mobx-react-lite';
import { CustomFieldsWidgetState } from '../../state';

interface EmptyStateContentProps {
  state: CustomFieldsWidgetState;
  emptyStateOverrides?: {
    title?: string;
    subtitle?: string;
  };
}

function _EmptyStateContent(props: EmptyStateContentProps) {
  const { state, emptyStateOverrides = {} } = props;
  const {
    container: { translate: t },
  } = state;

  return (
    <EmptyState
      dataHook="empty-state"
      title={
        state.hasWritePermissions
          ? emptyStateOverrides.title ||
            t('cairo.customFields.emptyState.title')
          : t('cairo.customFields.emptyStatePassive.title')
      }
      subtitle={
        state.hasWritePermissions
          ? emptyStateOverrides.subtitle ||
            t('cairo.customFields.emptyState.subtitle')
          : t('cairo.customFields.emptyStatePassive.subtitle')
      }
      theme="page-no-border"
    />
  );
}

export const EmptyStateContent = observer(_EmptyStateContent);