'use client'
import { ComponentFaqOne, Maybe } from "@/types/gpl/graphql";
import styles from "./index.module.scss";
import Image from "@/modules/common/components/image";
import Button from "@/modules/common/components/button/border";
interface Props {
  param: Maybe<ComponentFaqOne> | undefined;
}
import { useState } from "react";
export default function FaqOne({ param }: Props) {
      const [activeIndex, setActiveIndex] = useState<number>(-1);
  
    const toggleItem = (index: number) => {
      setActiveIndex(index);
    }
  return (
      <section className={styles.container}>
        <div className={styles.content}>
            <div className={styles.faqContainer}>
              {param?.list?.map((item, index) => (
                <div key={index} className={styles.faqItem}>
                  <button
                    className={styles.questionBtn}
                    onClick={() => toggleItem(index)}
                  >
                    <span className={`${styles.q} ${activeIndex === index ? styles.active : ''}`}>
                      ?
                    </span>
                    <div className={styles.questionContent}>
                      <span className={`${styles.questionText} ${activeIndex === index ? styles.active : ''}`}>{item?.title}</span>
                      <span className={`${styles.arrowIcon} ${activeIndex === index ? styles.arrowUp : ''}`}>
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                      </span>
                    </div>

                  </button>
                  <div className={`${styles.answerPanel} ${activeIndex === index ? styles.open : ''}`}>
                    <p>{item?.desc}</p>
                  </div>
                </div>
              ))}
            </div>

        </div>
      </section>
  );
}

.container {
  padding: 20px;

  .content {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;

    .faqContainer {
      gap: 24px;

      .faqItem {
        margin: 30px 0;
        padding-bottom: 15px;
        border-bottom: 1px solid #dcdada;

        .questionBtn {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 0;
          margin-bottom: 10px;
          background: transparent;
          border: none;
          cursor: pointer;
          text-align: left;

          .questionContent {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: #F0F0F0;
            padding: 12px 45px 12px 15px;
            flex: 1;
          }

          .q {
            width: 42px;
            height: 42px;
            background-color: blue;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: #fff;

            &.active {
              background-color: var(--primary-color);
            }
          }

          .questionText {
            font-weight: bold;
            font-size: 18px;
            color: #000;
          }

          .arrowIcon {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            color: #000;
            transition: transform 0.2s ease;

            &.arrowUp {
              transform: rotate(180deg);
              color: var(--primary-color);
            }
          }
        }

        .answerPanel {
          transition: max-height 0.4s ease, opacity 0.4s ease, overflow 0.4s ease;
          max-height: 0;
          opacity: 0;
          overflow: hidden;


          p {
            padding: 30px 0 10px 20px;
            font-size: 17px;
            line-height: 1.6;
            color: #444;
          }
        }

        .open {
          max-height: 100px !important;
          opacity: 1;
          overflow: visible;

        }
      }
    }

  }
}