"use client";
import { useState } from "react";
import Image from "next/image";
import {
  pricingTwoPlans,
  pricingTwoFeatures,
} from "@/data/pricing/pricing-two";

export default function PricingTwo() {
  const [selectedPlan, setSelectedPlan] = useState<string>("Basic");

  return (
    <div
      className="pricing-info3"
      data-aos="zoom-in"
      data-aos-duration={900}
      data-aos-delay={300}
    >
      <div className="price-row">
        <div className="pricing-compare-content">
          <h3 className="title">Features</h3>
          <p>Conversion-friendly Compare Plans outline</p>
        </div>
        <div className="info-box">
          {pricingTwoPlans.map((plan) => (
            <div
              key={plan.name}
              className={`price-box3 ${selectedPlan === plan.name ? "active" : ""}`}
              onClick={() => setSelectedPlan(plan.name)}
              style={{ cursor: "pointer" }}
            >
              <span className="sub-title">
                {plan.name === "Professional" ? "Professional" : plan.name}
              </span>
              <h3 className="price">
                {plan.price}
                <span>{plan.period}</span>
              </h3>
            </div>
          ))}
        </div>
      </div>

      {pricingTwoFeatures.map((feature, idx) => (
        <div
          key={feature.title}
          className={`price-row2 ${idx % 2 === 1 ? "v2" : ""}`}
        >
          <div className="price-title">
            <h4 className="title">{feature.title}</h4>
          </div>
          <div className="info-box">
            {feature.values.map((val, vIdx) => (
              <div
                key={vIdx}
                className={`price-box3-two ${"cross" in val && val.cross ? "v3" : ""}`}
              >
                {"text" in val ? (
                  <h4 className="title">{val.text}</h4>
                ) : (
                  <Image
                    src={`/${val.icon}`}
                    alt={
                      "cross" in val && val.cross ? "Not Included" : "Included"
                    }
                    width={24}
                    height={24}
                    style={{ width: "auto", height: "auto" }}
                  />
                )}
              </div>
            ))}
          </div>
        </div>
      ))}

      <div className="price-row2 v2">
        <div className="price-title v2"></div>
        <div className="info-box v2">
          {pricingTwoPlans.map((plan) => (
            <div key={plan.name} className="price-box3-two">
              <button
                className={`btn-style1 ${plan.buttonVariant} ${selectedPlan === plan.name ? "active" : ""}`}
                onClick={() => setSelectedPlan(plan.name)}
              >
                {plan.buttonLabel}
                <span>
                  <Image
                    src="/assets/images/icon/arrow.svg"
                    alt="Arrow Icon"
                    width={14}
                    height={14}
                  />
                </span>
              </button>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}