import Image from "next/image";
import type { ReactNode } from "react";

import { classNames } from "@calcom/lib";
import { IS_SELF_HOSTED } from "@calcom/lib/constants";
import { useHasTeamPlan } from "@calcom/lib/hooks/useHasPaidPlan";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { EmptyScreen } from "@calcom/ui";
import { FiUsers } from "@calcom/ui/components/icon";

export function UpgradeTip({
  dark,
  title,
  emptyTitle,
  emptyDescription,
  description,
  background,
  features,
  buttons,
  isParentLoading,
  children,
}: {
  dark?: boolean;
  title: string;
  description: string;
  /* overwrite EmptyScreen text */
  emptyTitle?: string;
  emptyDescription?: string;
  background: string;
  features: Array<{ icon: JSX.Element; title: string; description: string }>;
  buttons?: JSX.Element;
  /**Chldren renders when the user is in a team */
  children: JSX.Element;
  isParentLoading?: ReactNode;
}) {
  const { t } = useLocale();
  const { isLoading, hasTeamPlan } = useHasTeamPlan();

  if (hasTeamPlan) return children;

  if (isParentLoading || isLoading) return <>{isParentLoading}</>;

  return (
    <>
      <div className="relative flex justify-between w-full pb-10 min-h-[295px] items-center rounded-lg overflow-hidden">
        <Image alt={title} src={background} className="absolute object-cover min-h-[295px] w-full rounded-lg" height={295} width={1118} quality={100} />
        <div className="relative px-8 mt-4 sm:px-14">
          <h1 className={classNames("font-cal text-3xl", dark && "text-white")}>{t(title)}</h1>
          <p className={classNames("mt-4 mb-8 max-w-sm", dark ? "text-white" : "text-gray-700")}>
            {t(description)}
          </p>
          {buttons}
        </div>
      </div>

      <div className="grid-cols-3 mt-4 md:grid md:gap-4">
        {features.map((feature) => (
          <div key={feature.title} className="mb-4 min-h-[180px] w-full rounded-md bg-gray-50 p-8 md:mb-0">
            {feature.icon}
            <h2 className="mt-4 text-lg font-cal">{feature.title}</h2>
            <p className="text-gray-700">{feature.description}</p>
          </div>
        ))}
      </div>
    </>
  );
}