site-builder/craft/src/panels/sitesmith/SitesmithButton.tsx

import React from 'react';
import { useSitesmith } from '../../hooks/useSitesmith';
import { useEditorConfig } from '../../state/EditorConfigContext';

interface Props { onClick: () => void; }

export const SitesmithButton: React.FC<Props> = ({ onClick }) => {
  const cfg = useEditorConfig();
  const siteId = cfg.whpConfig?.siteId ?? 0;
  const { summary } = useSitesmith(siteId);
  const locked = summary?.status === 'DISABLED';
  const capped = summary?.status === 'CAP_REACHED';
  return (
    <button
      type="button"
      onClick={onClick}
      className="topbar-btn sitesmith-btn"
      title={locked ? 'Sitesmith — paid addon (click to learn more)' : 'Sitesmith AI Builder'}
      style={{
        background: locked ? '#1f1f24' : 'linear-gradient(135deg, #6366f1, #8b5cf6)',
        color: '#fff', border: 'none', padding: '6px 12px', borderRadius: 6, cursor: 'pointer', fontWeight: 500,
      }}
    >
      <i className="fa fa-magic" aria-hidden style={{ marginRight: 6 }} /> Sitesmith
      {locked && <i className="fa fa-lock" aria-hidden style={{ marginLeft: 6, fontSize: 12 }} />}
      {capped && !locked && <span aria-hidden style={{ marginLeft: 6, fontSize: 11, opacity: 0.85 }}>(cap)</span>}
    </button>
  );
};