import styles from "../styles/chatViewBanner.module.css";
import QuickActions from "./quickActions";
import { vscode } from "../utils/vscode";

const ChatViewBanner = () => {
  const handleOpenDocs = () => {
    // Open docs in external browser
    vscode.postMessage({
      type: "openExternal",
      payload: {
        url: "https://docs.codeflash.ai",
      },
    });
  };

  return (
    <div className={styles.chatViewBanner}>
      <div className={styles.heroSection}>
        <h2 className={styles.title}>Ready to Optimize</h2>
        <p className={styles.tagline}>
          AI-powered Python optimization with automatic testing & benchmarking
        </p>
        <button className={styles.docsLink} onClick={handleOpenDocs}>
          <span className="codicon codicon-book"></span>
          <span>View Documentation</span>
        </button>
      </div>

      <QuickActions />

      <div className={styles.hint}>
        <span className="codicon codicon-lightbulb"></span>
        <p>
          <strong>Tip:</strong> Look for <strong>CodeLens hints</strong> above
          functions in your editor for quick optimization access
        </p>
      </div>
    </div>
  );
};

export default ChatViewBanner;
