import { FacebookFilled, GithubFilled, GoogleOutlined } from "@ant-design/icons";

const SocialLogin: React.FC<{ isLoading: boolean; }> = ({ isLoading }) => {
    const onClickSocialLogin = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
        if (isLoading) e.preventDefault();
    }

    return (
        <div className="w-full flex space-x-2 items-center">
            <a
                className="button w-full bg-blue-500 hover:bg-blue-600"
                href={`${process.env.REACT_APP_FOODIE_URL}/api/v1/auth/facebook`}
                onClick={onClickSocialLogin}
            >
                <FacebookFilled className="m-0 laptop:mr-4 text-xl laptop:text-sm" />
                <span className="hidden laptop:inline-block">Facebook</span>
            </a>
            <a
                className="button w-full text-gray-800 bg-white hover:bg-gray-200 border border-gray-200"
                href={`${process.env.REACT_APP_FOODIE_URL}/api/v1/auth/google`}
                onClick={onClickSocialLogin}
            >
                <GoogleOutlined className="m-0 laptop:mr-4 text-xl laptop:text-sm" />
                <span className="hidden laptop:inline-block">Google</span>
            </a>
            <a
                className="button w-full border border-gray-300 bg-gray-700 hover:bg-gray-600"
                href={`${process.env.REACT_APP_FOODIE_URL}/api/v1/auth/github`}
                onClick={onClickSocialLogin}
            >
                <GithubFilled className="m-0 laptop:mr-4 text-xl laptop:text-sm" />
                <span className="hidden laptop:inline-block">GitHub</span>
            </a>
        </div>
    )
};

export default SocialLogin;