import React from "react";
import styles from "../styles/demoSuccess.module.css";

interface DemoSuccessProps {
  onGetStarted?: () => void;
}

const DemoSuccess: React.FC<DemoSuccessProps> = ({ onGetStarted }) => {
  const handleGetStarted = () => {
    if (onGetStarted) {
      onGetStarted();
    }
  };

  return (
    <div className={styles.demoSuccessContainer}>
      <div className={styles.successIcon}>
        <i className={`codicon codicon-check ${styles.successIconSymbol}`}></i>
      </div>

      <h2 className={styles.title}>Demo Completed Successfully!</h2>
      <p className={styles.subtitle}>
        You've seen how Codeflash can optimize your Python code with AI. Ready
        to boost your own functions?
      </p>

      <button
        className={styles.actionButton}
        onClick={handleGetStarted}
        title="Start optimizing your own Python code"
      >
        <i className={`codicon codicon-rocket ${styles.buttonIcon}`}></i>
        Get Started
      </button>
    </div>
  );
};

export default DemoSuccess;
