import { svgs } from "~/assets";
import { Link } from "@remix-run/react";

interface Props {
  displayText: string;
}

const SocialAuth: React.FC<Props> = ({ displayText }: Props) => {
  return (
    <>
      <div className="relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border border-dotted">
        <span className="relative z-10 bg-background px-2 text-muted-foreground">
          {displayText}
        </span>
      </div>
      <div className="flex justify-evenly">
        <Link to="https://accounts.google.com/signin/oauth/error/v2?authError=ChVyZWRpcmVjdF91cmlfbWlzbWF0Y2gSsAEKWW91IGNhbid0IHNpZ24gaW4gdG8gdGhpcyBhcHAgYmVjYXVzZSBpdCBkb2Vzbid0IGNvbXBseSB3aXRoIEdvb2dsZSdzIE9BdXRoIDIuMCBwb2xpY3kuCgpJZiB5b3UncmUgdGhlIGFwcCBkZXZlbG9wZXIsIHJlZ2lzdGVyIHRoZSByZWRpcmVjdCBVUkkgaW4gdGhlIEdvb2dsZSBDbG91ZCBDb25zb2xlLgogIBptaHR0cHM6Ly9kZXZlbG9wZXJzLmdvb2dsZS5jb20vaWRlbnRpdHkvcHJvdG9jb2xzL29hdXRoMi93ZWItc2VydmVyI2F1dGhvcml6YXRpb24tZXJyb3JzLXJlZGlyZWN0LXVyaS1taXNtYXRjaCCQAypMCgxyZWRpcmVjdF91cmkSPGh0dHBzOi8vb25lcHJpbnQuYXRvbXVzLmJ1enovYWNjb3VudHMvZ29vZ2xlL2xvZ2luL2NhbGxiYWNrLzKkAggBErABCllvdSBjYW4ndCBzaWduIGluIHRvIHRoaXMgYXBwIGJlY2F1c2UgaXQgZG9lc24ndCBjb21wbHkgd2l0aCBHb29nbGUncyBPQXV0aCAyLjAgcG9saWN5LgoKSWYgeW91J3JlIHRoZSBhcHAgZGV2ZWxvcGVyLCByZWdpc3RlciB0aGUgcmVkaXJlY3QgVVJJIGluIHRoZSBHb29nbGUgQ2xvdWQgQ29uc29sZS4KICAabWh0dHBzOi8vZGV2ZWxvcGVycy5nb29nbGUuY29tL2lkZW50aXR5L3Byb3RvY29scy9vYXV0aDIvd2ViLXNlcnZlciNhdXRob3JpemF0aW9uLWVycm9ycy1yZWRpcmVjdC11cmktbWlzbWF0Y2g%3D&client_id=138661767005-15rfkgmkt179jfmpvauh6nr771418dcj.apps.googleusercontent.com&flowName=GeneralOAuthFlow">
          <img src={svgs.google} alt="Google" />
        </Link>
        <Link to="">
          <img src={svgs.facebook} alt="Facebook" />
        </Link>
        <Link to="">
          <img src={svgs.apple} alt="Apple" />
        </Link>
      </div>
    </>
  );
};

export default SocialAuth;
