import React from 'react';

import type { JSX } from 'react';
import type { MCPOption } from '@redocly/theme/core/types';

import { ConnectMCPButton } from '@redocly/theme/components/Buttons/ConnectMCPButton';
import { useThemeConfig } from '@redocly/theme/core/hooks';

export type ConnectMCPProps = {
  placement?: 'top' | 'bottom';
  alignment?: 'start' | 'end';
  options?: MCPOption[];
};

export function ConnectMCP({
  placement = 'bottom',
  alignment = 'start',
  options,
}: ConnectMCPProps): JSX.Element | null {
  const themeConfig = useThemeConfig();
  const isMcpDisabled = themeConfig.mcp?.hide || themeConfig.mcp?.docs?.hide;

  if (isMcpDisabled) {
    return null;
  }

  return <ConnectMCPButton placement={placement} alignment={alignment} options={options} />;
}