"use client";

import React, { useState } from "react";
import { formatAmount } from "../../lib/utils/helpers";
import Button from "../Button";
import { CircleFadingPlus } from "lucide-react";
import TopUpInvestmentModal from "./TopUpInvestmentModal";

interface InvestmentOverviewProps {
  title: string;
  amount: number;
  growth: string;
  bgColor: string;
  textColor: string;
}

// Financial Card Component
export const InvestmentOverview = ({
  title,
  amount,
  growth,
  bgColor,
  textColor,
}: InvestmentOverviewProps) => {
  const [isOpen, setIsOpen] = useState(false);
  
  return (
    <>
      <div className={`${bgColor} rounded-3xl p-4 sm:p-8 text-white`}>
        {/* Title + Amount */}
        <h3 className="text-base sm:text-lg font-semibold mb-2">{title}</h3>
        <div className="text-xl sm:text-2xl lg:text-3xl font-bold mb-2">
          {formatAmount(amount)}
        </div>

        {/* Growth */}
        <div className={`flex items-center space-x-1 ${textColor}`}>
          <span className="text-xs sm:text-sm">{growth}</span>
        </div>
        <div className={`${textColor} text-xs mt-1`}>From Last Month</div>

        {/* Action Buttons */}
        <div className="mt-4 flex flex-wrap gap-3">
          <Button
            type="button"
            bgColor="bg-white"
            textColor="text-black"
            width="15%"
            hover="hover:text-white hover:bg-[#9E5AE3]"
            onClick={() => setIsOpen(true)}
          >
            <div className="flex items-center justify-center gap-2">
              <CircleFadingPlus size={16} strokeWidth={3} />
              <h4 className="text-xs sm:text-sm md:text-base">Top Up</h4>
            </div>
          </Button>

          <Button
            type="button"
            border="border border-white"
            width="15%"
          >
            <div className="flex items-center justify-center gap-2">
              <CircleFadingPlus size={16} strokeWidth={3} />
              <h4 className="text-xs sm:text-sm md:text-base">View All</h4>
            </div>
          </Button>
        </div>
      </div>
      
      <TopUpInvestmentModal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        onContinue={(amount) => {
          alert(`Adding ${amount} to investment`);
          setIsOpen(false);
        }}
      />
      </>
  );
};