import React from 'react';
import { ASSISTANT_BRAND_NAME } from '../constants';
import { BrandMark, Button } from './ui';

type AssistantDisabledGateProps = {
  onOpenSettings: () => void;
};

const AssistantDisabledGate: React.FC<AssistantDisabledGateProps> = ({ onOpenSettings }) => {
  return (
    <div className="flex flex-1 items-center justify-center px-6 py-8">
      <div className="w-full max-w-md rounded-2xl border border-app-border bg-app-surface p-8 text-center shadow-card">
        <BrandMark size={56} className="mx-auto" />
        <h1 className="mt-5 text-xl font-semibold text-app-text">ActionPanel AI requests are off</h1>
        <p className="mt-2 text-sm leading-6 text-app-muted">
          {`Turn on "Allow WordPress to send requests to ActionPanel AI" to start chatting and sharing the site context ${ASSISTANT_BRAND_NAME} needs. You control log reads, write approvals, and other permissions anytime in Settings.`}
        </p>
        <Button variant="primary" className="mt-6 w-full" onClick={onOpenSettings}>
          Open permissions
        </Button>
      </div>
    </div>
  );
};

export default AssistantDisabledGate;