import React from "react";
import styles from "./InstructionsSection.module.css";
import Image from "next/image";
interface InstructionsSectionProps {
  style?: React.CSSProperties;
}

const InstructionsSection: React.FC<InstructionsSectionProps> = ({ style }) => {
  return (
    <section className={styles.container} style={style}>
      <h2 className={styles.mainHeading}>
        For just $29 you get a neat Slide with:
      </h2>

      <div className={styles.listContainer}>
        <div className={styles.listItem}>
          <div className={styles.iconWrapper}>
            {/* <img src="https://dashboard.codeparrot.ai/api/image/Z-KLq94gt92eP1Ul/image.png" alt="" className={styles.icon} /> */}
            <Image
              src="https://dashboard.codeparrot.ai/api/image/Z-KLq94gt92eP1Ul/image.png"
              alt=""
              className={styles.icon}
              width={40}
              height={40}
            />
          </div>
          {/* <div className={styles.rectangle}></div> */}
          <p className={styles.text}><strong>A custom editable pitch deck</strong> for your startup</p>
        </div>

        <div className={styles.listItem}>
          <div className={styles.iconWrapper}>
            {/* <img src="https://dashboard.codeparrot.ai/api/image/Z-KLq94gt92eP1Ul/image-2.png" alt="" className={styles.icon} /> */}
            <Image
              src="https://dashboard.codeparrot.ai/api/image/Z-KLq94gt92eP1Ul/image-2.png"
              alt=""
              className={styles.icon}
              width={40}
              height={40}
            />
          </div>
          {/* <div className={styles.rectangle}></div> */}
          <p className={styles.text}><strong>10 questions</strong> that you can expect when pitching investors</p>
        </div>
      </div>

      <h3 className={styles.instructionsHeading}>INSTRUCTIONS</h3>

      <ul className={styles.instructionsList}>
        <li className={styles.instructionItem}>
            
<svg width="8" height="8" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="7.5" cy="7.5" r="7.5" fill="black"/>
</svg>
 Write in a clear and concise manner, without any special formatting
            or symbols
        </li>

        <li className={styles.instructionItem}>
           
<svg width="8" height="8" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="7.5" cy="7.5" r="7.5" fill="black"/>
</svg> Write the problem you are solving, Traction, and Funds
        </li>
      </ul>
    </section>
  );
};

export default InstructionsSection;