"use client";

import React from "react";
import { FcGoogle } from "react-icons/fc";
import { Button } from "@/components/ui/button";
import { signIn } from "next-auth/react";
import { DEFAULT_LOGIN_REDIRECT } from "@/lib/routes";

export const Social = () => {
  const onClick = (provider: "google" | "facebook" | "apple") => {
    if (provider === "google") {
      signIn("google", { callbackUrl: DEFAULT_LOGIN_REDIRECT });
    } else if (provider === "facebook") {
      // TODO: Facebook login
    } else if (provider === "apple") {
      // Apple login
    }
  };

  return (
    <div className="w-full flex flex-row justify-between space-x-4 px-4">
      <Button
        size="lg"
        className="w-full"
        variant="outline"
        onClick={() => onClick("google")}
        aria-label="Login with Google"
      >
        <FcGoogle className="h-5 w-5" />
      </Button>
      {/* <Button size="lg" className="w-full" variant="outline" onClick={() => {}}>
        <FaFacebook className="h-5 w-5 text-blue-700" />
      </Button>
      <Button size="lg" className="w-full" variant="outline" onClick={() => {}}>
        <FaApple className="h-5 w-5 color" />
      </Button> */}
    </div>
  );
};