"use client"

import { useGetGeneral } from "@/hook/useCommon"
import Image from "next/image"
import Link from "next/link"
import { useEffect } from "react"

type IProps = {
  user: any
}

export default function Membership({user}: IProps) {
  const {data: general} = useGetGeneral()

  return (
    <div>
      <div className="min-h-20 border border-[var(--secondary-30)] rounded-lg max-w-full bg-secondary-20">
        <Image
          alt=""
          src="/img/membership2.jpg"
          width={671}
          height={260}
          className="rounded-lg w-full object-cover max-w-full"
        />
      </div>
      {user?.subsendon ? (
        <div>
          <div className="lg:text-base text-[var(--secondary-100)] mb-4 pt-4">
            <p>Cancel Wizzor PayPal subscription any time, at least one day before each renewal date.</p>
            <ul className="list-disc list-inside">
              <li>Login to your PayPal account, click on Settings at the top right-hand corner.</li>
              <li>Select Payments then Manage pre-approved payments to see subscriptions.</li>
              <li>Look for Wizzor Subscriptions.</li>
            </ul>
          </div>
          <div className="lg:text-base text-[var(--danger-70)]">
            <p className="font-bold">Plan automatically renews until cancelled</p>
            <p>Note:</p>
            <ul>
              <li>If canceled, profile and all post will be deleted.</li>
              <li>Cancelation of Wizzor is done by clicking cancel, then going to your PayPal account and removing your subscription.</li>
            </ul>
          </div>
        </div>
      ) : (
        <div>
          <div className="lg:text-base text-[var(--secondary-100)] mb-4 pt-4">
            <p>Your 30 days trial period has end. Please subscribe to continue your process.</p>
            <ul className="list-decimal list-inside">
              <li>Trial ended text when for new user with free 1 month</li>
              <li>Expired subscription user text to resubscribe</li>
            </ul>
          </div>
        </div>
      )}
      {general?.data ? (
        <div className="flex flex-col lg:flex-row items-center gap-2 justify-center pb-6 pt-8">
          {user?.subsendon ? (
            <Link
              href={general?.data?.cancel_subscription_url || "#"}
              target="_blank"
              scroll={false}
              className="w-56 md:!text-base font-bold !h-10 md:!h-12 !rounded-lg !text-white bg-[var(--primary--70)] inline-flex items-center justify-center">
              Cancel Subscription
            </Link>
          ) : (
            <Link
              href="/subscription"
              target="_blank"
              className="w-56 md:!text-base font-bold !h-10 md:!h-12 !rounded-lg !text-white bg-[var(--danger-70)] inline-flex items-center justify-center">
              Start Subscription
            </Link>
          )}
          <Link
            href={`mailto:${general?.data?.admin_email || "administration@wizzor.net"}`}
            scroll={false}
            className="w-56 md:!text-base font-bold !h-10 md:!h-12 !rounded-lg !text-white !bg-[var(--secondary-100)] inline-flex items-center justify-center">
            Contact Support
          </Link>
        </div>
      ) : null}
    </div>
  )
}