"use client";

import React, { useState } from "react";
import InvestmentCard from "./InvestmentCard";
import InvestmentPlanModal from "./InvestmentPlanModal";
import { useRouter } from "next/navigation";
import { XMarkIcon } from "@heroicons/react/24/outline";

export interface InvestmentPlan {
  title: string;
  description: string;
  amount: string;
  duration: string;
  interest: string;
  total: string;
}

export default function InvestmentPlans() {
  const router = useRouter();
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [selectedPlan, setSelectedPlan] = useState<InvestmentPlan | null>(null);

  const plans: InvestmentPlan[] = [
    {
      title: "Basic",
      description: "Invest towards your future",
      amount: "₦25,000",
      duration: "6 months",
      interest: "15% Interest P.A",
      total: "₦28,750",
    },
    {
      title: "Standard",
      description: "Invest towards your future",
      amount: "₦50,000",
      duration: "6 months",
      interest: "20% Interest P.A",
      total: "₦60,000",
    },
    {
      title: "Premium",
      description: "Invest towards your future",
      amount: "₦100,000",
      duration: "6 months",
      interest: "25% Interest P.A",
      total: "₦125,000",
    },
  ];

  const handleGetStarted = (plan: InvestmentPlan) => {
    setSelectedPlan(plan);
    setIsModalOpen(true);
  };

  const handleCloseModal = () => {
    setIsModalOpen(false);
    setSelectedPlan(null);
  };

  return (
    <>
      <section className="py-12 px-4 sm:px-6 lg:px-8 relative">
        {/* Cancel button */}
        <button
          onClick={() => router.back()}
          className="absolute top-0 right-4 p-2 rounded-full hover:bg-gray-100 transition cursor-pointer"
        >
          <XMarkIcon className="h-6 w-6 text-[#9E5AE3]" />
        </button>

        <div className="text-center mb-10">
          <h2 className="text-2xl font-bold text-gray-800">Investment Plans</h2>

          <p className="mt-2 text-gray-600 text-xl max-w-xl text-center mx-auto">
            Invest towards any personal or financial goal of your choice
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto">
          {plans.map((plan, idx) => (
            <InvestmentCard
              key={idx}
              {...plan}
              position={
                idx === 0 ? "first" : idx === plans.length - 1 ? "last" : "middle"
              }
              onGetStarted={() => handleGetStarted(plan)}
            />
          ))}
        </div>
      </section>

      <InvestmentPlanModal
        isOpen={isModalOpen}
        onClose={handleCloseModal}
        plan={selectedPlan}
      />
    </>
  );
}