components/premium/overlay.tsx

import { login, useUser } from "@/utils/auth";

import { Premium } from ".";
import { FormattedMessage } from "react-intl";

export const PremiumOverlay = ({ className }: any) => {
  const { user } = useUser();
  return !user ? (
    <div
      className={`absolute left-0 top-0 w-full h-full bg-opacity-80 bg-dark-600 flex items-center justify-center flex-col gap-3 ${className}`}
    >
      <Premium size="32" tooltip={false} />
      <div>
        <p className="font-semibold text-white text-lg">
          <FormattedMessage id="freemium.overlay.title" />
        </p>
        <button
          className="bg-yellow text-white rounded-lg w-full text-center px-3 py-3 mt-2 text-sm font-semibold hover:bg-opacity-80 flex items-center justify-center gap-2"
          onClick={login}
        >
          <FormattedMessage id="freemium.overlay.cta" />
        </button>
      </div>
    </div>
  ) : null;
};