import type { FunctionalComponent } from 'preact';
import { useT } from '../../hooks/useT';
import {
  NO_VIEW_MODULE_MESSAGE_KEY,
  NO_VIEW_MODULE_TITLE_KEY,
} from '../../core/moduleAvailability';

interface ModuleUnavailableStateProps {
  className?: string;
}

export const ModuleUnavailableState: FunctionalComponent<ModuleUnavailableStateProps> = ({ className = '' }) => {
  const t = useT();

  return (
    <div
      className={[
        'ask-flex ask-h-full ask-min-h-[180px] ask-items-center ask-justify-center ask-p-6 ask-text-center',
        className,
      ].filter(Boolean).join(' ')}
      role="status"
    >
      <div className="ask-max-w-[320px] ask-rounded-[22px] ask-border ask-border-dashed ask-border-borderSubtle ask-bg-surface ask-px-5 ask-py-5">
        <div className="ask-mx-auto ask-mb-3 ask-flex ask-h-10 ask-w-10 ask-items-center ask-justify-center ask-rounded-full ask-bg-surfaceAlt ask-text-[18px] ask-text-textMuted">
          +
        </div>
        <p className="ask-text-[13px] ask-font-semibold ask-text-textMain">
          {t(NO_VIEW_MODULE_TITLE_KEY, 'No view available')}
        </p>
        <p className="ask-mt-1.5 ask-text-[11px] ask-leading-5 ask-text-textMuted">
          {t(NO_VIEW_MODULE_MESSAGE_KEY, 'Create a view before using this tool.')}
        </p>
      </div>
    </div>
  );
};

export default ModuleUnavailableState;
