import { useState } from "react"
import styles from "./plan-summary.module.scss"
import PlanDetails from "./Details"
import PlanTerms from "./Terms"
import Payments from "./Payment"

const EstatePlanSummary = () => {
  const [toggleActive, setToggleActive] = useState<number>(1)

  // ✅ Strongly typed toggle function
  const toggleActiveState = (key: number) => {
    setToggleActive(key)
  }

  return (
    <div className={styles["plan__summary"]}>
      <div className={styles["plan__summary--details"]}>
        {/* ===== Tabs ===== */}
        <div className={styles["plan__summary--details--tab"]}>
          <div
            onClick={() => toggleActiveState(1)}
            className={
              toggleActive === 1
                ? styles["plan__summary--details--tab--item--active"]
                : styles["plan__summary--details--tab--item"]
            }
          >
            Details
          </div>

          <div
            onClick={() => toggleActiveState(2)}
            className={
              toggleActive === 2
                ? styles["plan__summary--details--tab--item--active"]
                : styles["plan__summary--details--tab--item"]
            }
          >
            Terms
          </div>

          <div
            onClick={() => toggleActiveState(3)}
            className={
              toggleActive === 3
                ? styles["plan__summary--details--tab--item--active"]
                : styles["plan__summary--details--tab--item"]
            }
          >
            Payment
          </div>
        </div>

        {/* ===== Dynamic Tab Content ===== */}
        <div className={styles["plan__summary--details--children"]}>
          {toggleActive === 1 && <PlanDetails />}
          {toggleActive === 2 && <PlanTerms />}
          {toggleActive === 3 && <Payments />}
        </div>
      </div>
    </div>
  )
}

export default EstatePlanSummary