import { useState } from "react";
import styles from "./steponenew.module.css";
import hybridModel from "../../../assets/images/hybrid_model.png";

interface StepOneProps {
    handleNext: (data: any) => void;
}

const SUPPORT_LEVELS = ["Just Me", "2–5", "5–10", "10+"];

export default function StepOneNew({ handleNext }: StepOneProps) {
    const [selectedLevel, setSelectedLevel] = useState<string>("");

    return (
        <div className={styles.container}>
            <h1 className={styles.title}>Let's customize QIXS to match your goals.</h1>

            <div className={styles.banner}>
                <div className={styles.bannerContent}>
                    <p className={styles.bannerLabel}>Your support model</p>
                    <h2 className={styles.bannerTitle}>Hybrid Support</h2>
                    <p className={styles.bannerDescription}>
                        AI handles common customer questions instantly.
                        Your team steps in for complex conversations.
                    </p>
                </div>
                <div className={styles.bannerImage}>
                    <img src={hybridModel} alt="Hybrid Model" />
                </div>
            </div>

            <div className={styles.questionContainer}>
                <h3 className={styles.question}>How many people handle customer support?</h3>
                <div className={styles.optionsGrid}>
                    {SUPPORT_LEVELS.map((level) => (
                        <div
                            key={level}
                            className={`${styles.optionCard} ${selectedLevel === level ? styles.optionCardActive : ""
                                }`}
                            onClick={() => setSelectedLevel(level)}
                        >
                            {level}
                        </div>
                    ))}
                </div>
            </div>

            <div className={styles.buttonContainer}>
                <button
                    className={styles.continueButton}
                    onClick={() => handleNext({ support_level: selectedLevel })}
                    disabled={!selectedLevel}
                >
                    Continue
                </button>
            </div>
        </div>
    );
}