"use client";

import Image from "next/image";
import React from "react";
import { Inter } from "next/font/google";
const inter = Inter({ subsets: ["latin"] });
import { signIn } from "next-auth/react"; // Import signIn function

import { Button } from "@/components/ui/button";
import Link from "next/link";

const page = () => {
  return (
    <main className="flex bg-[#151515] h-screen">
      <section className="w-1/2 flex items-end overflow-hidden">
        <Image
          src="/image/splash.png"
          alt="login splash"
          width={1000}
          height={1000}
        />
      </section>
      <section className="w-1/2 text-white flex items-center justify-center">
        <div className="h-[700px] w-[500px] flex flex-col justify-between">
          <section>
            <Link href="/">
              <Image
                src="/logo/logo-full.svg"
                alt="logo"
                width={200}
                height={1000}
              />
            </Link>
          </section>
          <section className="flex flex-col justify-between h-1/3">
            <div className="flex flex-col gap-2">
              <h1
                className={`text-white text-5xl ${inter.className} font-bold tracking-tighter`}
              >
                Hi There 👋
              </h1>
              <p className="text-xl tracking-tighter">
                Login to your Google account.
              </p>
            </div>
            <Button
              className="bg-[#4285F4] h-[65px] text-lg tracking-tight"
              onClick={() => signIn("google", { callbackUrl: "/dashboard" })}
            >
              Login with Google
            </Button>
          </section>
          <section className="text-[#efefef]/50 tracking-tighter">
            <p>&copy; 2024 Torpedo</p>
          </section>
        </div>
      </section>
    </main>
  );
};

export default page;