import React from 'react';
import { PageSection } from '../../../../ips-react-fw/components/layout/PageSection';

type ModuleDisabledStateProps = {
  pageTitle: string;
  moduleLabel: string;
  onOpenSettings: () => void;
  description?: string;
  message?: string;
};

export const ModuleDisabledState: React.FC<ModuleDisabledStateProps> = ({
  pageTitle,
  moduleLabel,
  onOpenSettings,
  description,
  message,
}) => (
  <PageSection
    title={pageTitle}
    description={description || `Manage ${moduleLabel} entries directly inside the Cart React admin.`}
  >
    <div
      style={{
        border: '1px solid #bfdbfe',
        background: '#eff6ff',
        borderRadius: 18,
        padding: '20px 22px',
        display: 'grid',
        gap: 12,
      }}
    >
      <div style={{ display: 'grid', gap: 8 }}>
        <strong style={{ fontSize: 18, lineHeight: 1.3, color: '#1e3a8a' }}>
          {moduleLabel} is disabled
        </strong>
        <p style={{ margin: 0, color: '#334155', maxWidth: 760 }}>
          {message || 'Activate this module to manage entries. Existing entries remain stored and will be available again after re-activating the module.'}
        </p>
      </div>

      <div>
        <button
          type="button"
          className="ips-page-shell-header__action"
          onClick={onOpenSettings}
        >
          Go to settings
        </button>
      </div>
    </div>
  </PageSection>
);