import Image from "next/image";
import { FcGoogle } from "react-icons/fc";
export default function GoogleAuthButton({
  lojaId,
  isLoggedIn,
  authData,
  login,
  logout,
  profile,
}: any) {
  if (!isLoggedIn)
    return (
      <button
        onClick={() => login()}
        className="flex items-center gap-3 border-2 border-black/30 px-4 py-2 rounded-md hover:bg-green-50"
      >
        <FcGoogle size={20} />
        <span>Entrar com Google</span>
      </button>
    );

  return (
    <div className="flex items-center w-full gap-3 border-2 border-green-500 px-4 py-2 rounded-md">
      <div className="h-10 w-10 rounded-full overflow-hidden">
        <Image
          src={profile?.picture}
          width={40}
          height={40}
          alt="Foto de perfil Google"
          className="object-cover"
        />
      </div>
      <div className="flex flex-col text-left">
        <span className="font-semibold text-sm">{profile.name}</span>
        <span className="text-xs text-gray-500">{profile.email}</span>
        <span
          onClick={() => logout()}
          className="text-xs cursor-pointer text-red-600 mt-1 hover:underline"
        >
          Trocar conta
        </span>
      </div>
    </div>
  );
}