/* eslint-disable @typescript-eslint/no-explicit-any */

import styles from "./plan-summary.module.scss";
import { useState } from "react";

import {
  FiFileText,
  FiShield,
  FiCreditCard,
} from "react-icons/fi";

import PlanDetails from "./Details";
import PlanTerms from "./Terms";
import Payments from "./Payment";

const PlanDetailsSummary = ({
  plan,
}: any) => {
  const [toggleActive, setToggleActive] =
    useState(1);

  return (
    <div className={styles.plan__summary}>
      <div
        className={
          styles["plan__summary--header"]
        }
      >
        <span>Investment Plan</span>

        <h2>{plan?.name}</h2>

        <p>
          Review all investment
          information carefully before
          proceeding with your purchase.
        </p>
      </div>

      <div
        className={
          styles["plan__summary--details"]
        }
      >
        <div
          className={
            styles["plan__summary--details--tab"]
          }
        >
          <button
            onClick={() =>
              setToggleActive(1)
            }
            className={
              toggleActive === 1
                ? styles.activeTab
                : styles.tab
            }
          >
            <FiFileText />

            <span>Details</span>
          </button>

          <button
            onClick={() =>
              setToggleActive(2)
            }
            className={
              toggleActive === 2
                ? styles.activeTab
                : styles.tab
            }
          >
            <FiShield />

            <span>Terms</span>
          </button>

          <button
            onClick={() =>
              setToggleActive(3)
            }
            className={
              toggleActive === 3
                ? styles.activeTab
                : styles.tab
            }
          >
            <FiCreditCard />

            <span>Payment</span>
          </button>
        </div>

        <div
          className={
            styles[
              "plan__summary--details--children"
            ]
          }
        >
          {toggleActive === 1 && (
            <PlanDetails plan={plan} />
          )}

          {toggleActive === 2 && (
            <PlanTerms />
          )}

          {toggleActive === 3 && (
            <Payments />
          )}
        </div>
      </div>
    </div>
  );
};

export default PlanDetailsSummary;