"use client";

import Link from "next/link";
import Image from "next/image";

type AuthFooterProps = {
  termsHref?: string;
  privacyHref?: string;
  signUpHref?: string;
  showSignUpLink?: boolean;

  termsText?: string;
  privacyText?: string;
  signUpText?: string;
  noAccountText?: string;
  orText?: string;
  loginAsText?: string;
  by_sign_to?: string;
  by_sign_and?: string;

  socialLogins?: SocialLoginButton[];

  onGoogleLogin?: () => void;
  onFacebookLogin?: () => void;
};
type SocialLoginButton = {
  label: string;
  iconSrc: string;
  alt: string;
  onClick: () => void;
};
export default function AuthFooter({
  termsHref = "/terms-and-conditions",
  privacyHref = "/privacy-policy",
  signUpHref = "#",
  showSignUpLink = true,

  termsText = "T&C",
  privacyText = "Privacy Policy",
  signUpText = "Sign Up",
  noAccountText = "Don’t Have An Account?",
  orText = "Or",
  loginAsText = "Login As",

  by_sign_to = "By signing in, you agree to",
  by_sign_and = "and",

  onGoogleLogin,
  onFacebookLogin,
  socialLogins = [],
}: AuthFooterProps) {
  return (
    <div>
      <p className="text-sm mt-4 text-center dark:text-neutrals300">
        {by_sign_to}{" "}
        <Link
          href={termsHref}
          className="underline font-semibold dark:hover:text-white hover:text-primary500"
        >
          {termsText}
        </Link>{" "}
        {by_sign_and}{" "}
        <Link
          href={privacyHref}
          className="underline font-semibold dark:hover:text-white hover:text-primary500"
        >
          {privacyText}
        </Link>
      </p>

      <div className="flex items-center my-5 md:my-7.5 dark:text-neutrals300">
        <hr className="flex-grow border-gray-300 dark:border-neutrals500" />
        <p className="mx-5 text-sm text-center">
          {orText}{" "}
          <span className="md:block text-base font-medium capitalize">
            {loginAsText}
          </span>
        </p>
        <hr className="flex-grow border-gray-300 dark:border-neutrals500" />
      </div>

      {socialLogins?.length > 0 && (
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-5 max-w-80 mx-auto sm:max-w-full sm:gap-7.5 justify-center">
          {socialLogins.map((btn, index) => (
            <button
              key={index}
              onClick={btn.onClick}
              className="group flex border border-neutrals200 rounded-lg overflow-hidden shadow-sm bg-white/20 transition hover:bg-white dark:bg-cardfooter dark:border-neutrals500 dark:hover:bg-darkbg"
            >
              <div className="bg-white p-2 flex items-center justify-center dark:bg-darkbg">
                <Image src={btn.iconSrc} alt={btn.alt} width={28} height={28} />
              </div>
              <span className="p-2.5 text-base capitalize text-neutrals800 leading-6 dark:text-neutrals100 group-hover:text-primary500 dark:group-hover:text-white transition-colors">
                {btn.label}
              </span>
            </button>
          ))}
        </div>
      )}

      {showSignUpLink && (
        <p className="text-sm md:text-base text-center mt-5 sm:mt-6 md:mt-7.5 dark:text-neutrals300">
          {noAccountText}{" "}
          <Link
            href={signUpHref}
            className="text-primary500 font-semibold underline ms-2 hover:text-darkprimary dark:text-primary400 dark:hover:text-primary300"
          >
            {signUpText}
          </Link>
        </p>
      )}
    </div>
  );
}