"use client";

import React, { useEffect, useState } from "react";
import { Subscription, User } from "@/types";
import { getSubscriptions } from "@/app/actions";
import { useRouter } from "next/navigation";

interface GetStartedSectionButtonProps {
  user: User;
}
export const GetStartedSectionButton = ({
  user,
}: GetStartedSectionButtonProps) => {
  const router = useRouter();
  const [subscription, setSubscription] = useState<Subscription>();
  useEffect(() => {
    (async () => {
      if (!user) {
        return;
      }
      const subscriptions = await getSubscriptions();
      if (subscriptions.length > 0) {
        setSubscription(subscriptions[0]);
      }
    })();
  }, [user]);

  return subscription ? (
    <></>
  ) : (
    <button
      onClick={() => router.push("/pricing")}
      className="px-10 py-2 text-base capitalize !rounded-3xl bg-base-content bg-gradient-to-r from-primary to-secondary hover:bg-gray-900 w-full sm:w-auto"
    >
      Upgrade
    </button>
  );
};

export default GetStartedSectionButton;