import React from 'react';
import { LuBookOpen } from 'react-icons/lu';

import InfoDialogButton from './InfoDialogButton';

/**
 * "Your knowledge base is steering this brand" - what the next Force scan
 * will do with it. It was a permanent amber banner above the report even
 * though it says the same thing every week, so it now sits behind an amber
 * header button next to the scan button it describes.
 *
 * @returns {JSX.Element} Header button plus its dialog.
 */
const KnowledgeBaseNotice = (): JSX.Element => {
  return (
    <InfoDialogButton
      compact
      label="Knowledge base"
      icon={<LuBookOpen className="h-4 w-4" aria-hidden />}
      tone="warning"
      title="Knowledge base is steering this brand"
    >
      <p>
        Your next Force scan will rebuild your keywords, tracked prompts and
        article angles from your knowledge base - so everything stays aligned
        with your business and tracks exactly the topics you care about. Prefer
        to let the AI decide on its own? Clear it from the Knowledge Base page.
      </p>
    </InfoDialogButton>
  );
};

export default KnowledgeBaseNotice;