"use client";

import { useState } from "react";
import Image from "next/image";
import Link from "next/link";
import { pricingData } from "@/data/home/pricingData";

export default function PricingSection() {
  const [activeTab, setActiveTab] = useState<"monthly" | "yearly">("monthly");
  const { subTitle, title, description, tabs, plans } = pricingData;

  const PricingCard = ({
    plan,
    index,
  }: {
    plan: (typeof plans.monthly)[0];
    index: number;
  }) => (
    <div className="col-lg-6" key={index}>
      <div className={`pricing-card ${plan.variant || ""}`}>
        <div className="pricing-content">
          <h3 className="title">{plan.title}</h3>
          <p>{plan.description}</p>
          <h4 className="price">
            {plan.price}
            <span>{plan.period}</span>
          </h4>
          <Link href={plan.buttonHref} className="btn-style1">
            {plan.buttonText}
            <span>
              <Image
                src="/assets/images/icon/arrow.svg"
                alt="Arrow Icon"
                width={20}
                height={20}
              />
            </span>
          </Link>
        </div>
        <div className="pricing-list-content">
          <h4 className="title">Features:</h4>
          <ul className="price-list">
            {plan.features.map((feature, featureIndex) => (
              <li key={featureIndex}>
                <Image
                  src={feature.iconSrc}
                  alt={feature.iconAlt}
                  width={14}
                  height={14}
                />
                {feature.text}
              </li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  );

  return (
    <section id="platform" className="pricing-sec space-top">
      <div className="carousel-container">
        <div className="price-title">
          <div className="sec-title">
            <span
              className="sub-title"
              data-aos="fade-up"
              data-aos-duration={900}
              data-aos-delay={200}
            >
              {subTitle}
            </span>
            <h2
              className="title"
              data-aos="fade-up"
              data-aos-duration={900}
              data-aos-delay={200}
            >
              {title}
            </h2>
            <p data-aos="fade-up" data-aos-duration={900} data-aos-delay={300}>
              {description}
            </p>
          </div>
          <ul
            className="nav nav-tabs"
            id="myTab"
            role="tablist"
            data-aos="fade-up"
            data-aos-duration={900}
            data-aos-delay={400}
          >
            <li className="nav-item" role="presentation">
              <button
                className={`nav-link ${activeTab === "monthly" ? "active" : ""}`}
                onClick={() => setActiveTab("monthly")}
                type="button"
                role="tab"
              >
                {tabs.monthly}
              </button>
            </li>
            <li className="nav-item" role="presentation">
              <button
                className={`nav-link ${activeTab === "yearly" ? "active" : ""}`}
                onClick={() => setActiveTab("yearly")}
                type="button"
                role="tab"
              >
                {tabs.yearly}
              </button>
            </li>
          </ul>
        </div>
        <div className="tab-content" id="myTabContent">
          <div
            className={`tab-pane fade ${activeTab === "monthly" ? "show active" : ""}`}
            role="tabpanel"
          >
            <div className="row">
              {plans.monthly.map((plan, index) => (
                <PricingCard key={index} plan={plan} index={index} />
              ))}
            </div>
          </div>
          <div
            className={`tab-pane fade ${activeTab === "yearly" ? "show active" : ""}`}
            role="tabpanel"
          >
            <div className="row">
              {plans.yearly.map((plan, index) => (
                <PricingCard key={index} plan={plan} index={index} />
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}