Untitled

'use client';

import GlobalLoading from '@/components/Global/GlobalLoading';
import { xoomBackendUrl } from '@/lib/axios/getAxios';
import { useEffect, useState } from 'react';
import { FaCheckCircle } from 'react-icons/fa';

const PACKAGE_SELECTED_CLASS =
  'ring-2 ring-red-500 scale-110 shadow shadow-gray-400';
const PACKAGE_DEFAULT_CLASS = 'ring-1 ring-white-500';

export default function SubscriptionHome() {
  const [subscriptionData, setSubscriptionData] = useState([]);
  const [selectedPackage, setSelectedPackage] = useState(0);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function getAllSubscription() {
      try {
        const { data = [] } = await xoomBackendUrl.get(`/api/subscriptions`);
        setSubscriptionData(data);
        setLoading(false);

        setSelectedPackage(data.length > 0 ? data[0] : 0);
      } catch (error) {
        console.error('Error fetching subscription data:', error);
        setLoading(false);
      }
    }

    getAllSubscription();
  }, []);

  const handlePackageClick = (packageData) => {
    setSelectedPackage(packageData);
  };

  return (
    <div className="mx-auto max-w-screen-xl mt-3">
      {loading ? (
        <GlobalLoading />
      ) : (
        <div className="bg-white text-black mt-5">
          <div className="flex flex-col lg:flex-row items-center justify-around mt-2 lg:mt-10 p-5">
            {subscriptionData?.data?.map((packageData, index) => (
              <div
                key={packageData?._id}
                onClick={() => handlePackageClick(index)}
                className={`bg-primary rounded-3xl p-4 xl:p-8 mt-5 lg:mt-0 ${
                  parseInt(selectedPackage) === parseInt(index)
                    ? PACKAGE_SELECTED_CLASS
                    : PACKAGE_DEFAULT_CLASS
                } cursor-pointer`}
              >
                <div className="flex items-center justify-between gap-x-4">
                  <h2 className="text-sm lg:text-lg font-semibold leading-8 text-white">
                    {packageData?.title}
                  </h2>
                </div>
                <p className="mt-4 text-sm leading-6 text-gray-300">
                  Package details for {packageData?.title}
                </p>
                <p className="mt-6 flex items-baseline gap-x-1">
                  <span className="text-xl lg:text-4xl font-bold tracking-tight text-white">
                    {(packageData?.price / packageData?.duration).toFixed(2)} $
                    / month
                  </span>
                </p>
                <div className="flex items-center justify-center mt-3">
                  <a
                    href="#order"
                    aria-describedby=""
                    className={`btn btn-sm rounded-md ${
                      parseInt(selectedPackage) === parseInt(index)
                        ? 'btn-secondary'
                        : ''
                    }`}
                  >
                    Get Now
                  </a>
                </div>
              </div>
            ))}
          </div>

          <br />
          <br />
          <div className="divider m-0 bg-white">
            <div className="bg-[#FB0405] py-2 text-white">
              <span className="p-5 cursor-pointer">{`Package Details for ${subscriptionData?.data?.[selectedPackage]?.title}`}</span>
            </div>
          </div>
          <br />
          {/* description  */}
          <div id="order" className="grid grid-cols-12 gap-5 px-5 mt-10">
            <div className="col-span-12 lg:col-span-7">
              {subscriptionData?.data?.map((item, index) => (
                <div key={index}>
                  {parseInt(selectedPackage) === parseInt(index) && (
                    <div className="bg-primary -skew-y-[0.5deg]">
                      <div className="skew-y-[0.5deg] divide-y p-4 lg:p-10 text-white">
                        <div className="flex items-center justify-between py-2">
                          <h4>{item?.title}</h4>
                          <h4>{`US ${item?.price}$`}</h4>
                        </div>
                        <div className="flex items-center justify-between py-2">
                          <h4>Total</h4>
                          <h4 className="text-green-600">{`US ${item?.price}$`}</h4>
                        </div>
                        <div className="flex justify-between items-center">
                          <p className="text-xs text-gray-400">
                            By proceeding, you agree to our Terms of Service and
                            Privacy Policy.
                          </p>
                          <button
                            type="submit"
                            className="btn btn-sm btn-secondary rounded-md mt-3"
                          >
                            Payment Now
                          </button>
                        </div>
                      </div>
                    </div>
                  )}
                </div>
              ))}
            </div>
            <div className="col-span-12 lg:col-span-5">
              <div className="bg-primary p-5 -skew-y-[0.5deg]">
                <h4 className="text-xl font-semibold py-3 text-white">
                  Package Benefits
                </h4>
                {subscriptionData?.data?.[selectedPackage]?.descriptions.map(
                  (description, index) => (
                    <div
                      key={index}
                      className="py-1 flex gap-2 bg-gray-600 p-2 mt-2 skew-y-[0.5deg]"
                    >
                      <div>
                        <FaCheckCircle className="text-white inline-block align-text-bottom mr-2 text-xl" />
                      </div>
                      <p>{description}</p>
                    </div>
                  )
                )}
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}