"use client";
import Image from "next/image";
import logo from "../../../public/logo.png";
import guest from "../../../public/icons/guest.png";
import facebookIcon from "../../../public/icons/facebook.png";
import googleIcon from "../../../public/icons/google.png";
// import appleIcon from "../../../public/icons/apple.png";
import { signIn } from "next-auth/react";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";

const socialLogins = [
  {
    provider: "google",
    label: "Continue with Google",
    icon: googleIcon,
  },
  // {
  //   provider: "apple",
  //   label: "Continue with Apple",
  //   icon: appleIcon,
  // },
  // {
  //   provider: "facebook",
  //   label: "Continue with Facebook",
  //   icon: facebookIcon,
  // },
];

const SocialLoginModal = ({
  isOpen,
  setIsOpen,
  onContinueGuest,
}: {
  isOpen: boolean;
  setIsOpen: (value: boolean) => void;
  onContinueGuest: () => void;
}) => {
  return (
    <Dialog open={isOpen} onOpenChange={setIsOpen}>
      <DialogContent
        onInteractOutside={(e) => {
          e.preventDefault();
        }}
        className="sm:max-w-md bg-[#1a1a1a] border-gray-800 text-white rounded-2xl p-8"
      >
        <DialogHeader className="items-center text-center space-y-4">
          <div className="flex items-center mb-4">
            <Image src={logo} alt="reelfix logo" />
          </div>

          <DialogTitle className="text-[24px] text-white font-normal pt-4">
            Welcome to reelflix !
          </DialogTitle>
        </DialogHeader>

        <div className="space-y-4 py-4">
          <Button
            variant="outline"
            onClick={onContinueGuest}
            className="w-full flex items-center text-normal cursor-pointer h-[60] justify-center gap-2 py-6 text-base bg-[#0A0A0B] border-1-[#A4A4A4] hover:bg-[#1A1A1C] text-white hover:text-white"
          >
            <Image
              src={guest}
              alt={`guest logo`}
              width={24}
              height={24}
              className="mr-2"
            />
            Continue as a Guest
          </Button>
          {socialLogins?.map(({ provider, label, icon }) => (
            <Button
              key={provider}
              variant="outline"
              onClick={() => signIn(provider, { callbackUrl: "/" })}
              className="w-full flex items-center cursor-pointer text-normal justify-center gap-2 h-[60] py-6 text-base bg-[#0A0A0B] border-[#A4A4A4] hover:bg-[#1A1A1C] text-white hover:text-white"
            >
              <Image
                src={icon}
                alt={`${label} logo`}
                width={20}
                height={24}
                className="mr-2"
              />
              {label}
            </Button>
          ))}
        </div>
        {/* <div className="mt-2">
          <Button className="w-full bg-gradient-to-r from-pink-500 to-orange-500 text-white font-bold py-6 text-base hover:opacity-90">
            Login Now
          </Button>
        </div> */}
      </DialogContent>
    </Dialog>
  );
};

export default SocialLoginModal;