"use client";

import { useState } from "react";
import Button from "app/components/ui/button";
import styles from "./steptwo.module.css";
import ChatboxPhone from "app/components/ui/chatbox-phone";

interface StepTwoProps {
  handleNext: (data: any) => void;
  handleBack: () => void;
  handleFinish: (data:any) => void;
}

export default function Steptwo({ handleNext, handleBack, handleFinish }: StepTwoProps) {
  const [selectedColor, setSelectedColor] = useState("#9100DF");

  const brandColors = [
    "#D9D9D9",
    "#101010",
    "#7861BA",
    "#F7B1AD",
    "#A7D16C",
    "#82654E",
    "#F79433",
    "#BDBFF8",
    "#FEE45A",
    "#A72B2B",
  ];

  return (
    <>
      <div className={styles.main}>
        <div className={styles.leftSection}>
          <div className={styles.content}>
            <h1 className={styles.title}>Set up your agent theme</h1>
            <p className={styles.subtitle}>Choose a brand color for your agent chatbox</p>

            <div className={styles.section}>
              <label className={styles.label}>Brand Color</label>
              <div className={styles.colorGrid}>
                {brandColors.map((color) => (
                  <button key={color} className={`${styles.colorButton} ${selectedColor === color ? styles.selected : ""}`} style={{ backgroundColor: color }} onClick={() => setSelectedColor(color)} aria-label={`Select color ${color}`} />
                ))}
              </div>
            </div>
          </div>
        </div>
        <div className={styles.rightSection}>
          <ChatboxPhone headerColor={selectedColor} />
        </div>
      </div>

      <div className={styles.buttonContainer}>
        <Button btnVariant="secondary" onClick={handleBack}>Back</Button>
        <div>
          <Button btnVariant="primary" onClick={() => { handleNext({ colour: selectedColor }); handleFinish({ colour: selectedColor }); }}>
            Finish
          </Button>
        </div>
      </div>
    </>
  );
}