import React from "react";
import { Button, Input } from "octa-ui";
import "octa-ui/dist/style.css";

const SignIn = () => {
  return (
    <div className="flex flex-col items-center">
      <h1 className="font-bold mt-6">Sign in to Example</h1>
      <p className="text-[#656565] mt-1 text-sm">
        Welcome back! Please sign in to continue
      </p>
      <div className="flex flex-row items-center space-x-2 mt-7">
        <Button variant={"outline"} className="w-[165px]">
          <img src="/svg/google.svg" alt="Google" className="h-5 w-5 mr-2" />
          <span>Google</span>
        </Button>

        <Button variant={"outline"} className="w-[165px]">
          <img
            src="/svg/github-dark.svg"
            alt="Github"
            className="h-5 w-5 mr-2 "
          />
          <span>GitHub</span>
        </Button>
      </div>
      <div className="flex flex-row items-center space-x-3 mt-5 mb-6">
        <hr className="w-[150px]" />
        <span className="text-[#a7a7a7] text-sm">or</span>
        <hr className="w-[150px]" />
      </div>
      <Input label="Email" className="w-[340px]" />
      <Button variant={"materialSecondary"} className="mt-5 w-[340px]">
        Continue
      </Button>
    </div>
  );
};

export default SignIn;