{"size": 1556, "ext": "js", "max_stars_repo_path": "src/components/AuthProvider/index.js", "max_stars_repo_name": "bernatfogarasi/team-listener-client", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/AuthProvider/index.js", "max_issues_repo_name": "bernatfogarasi/team-listener-client", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/AuthProvider/index.js", "max_forks_repo_name": "bernatfogarasi/team-listener-client", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 18.0930232558, "max_line_length": 54, "alphanum_fraction": 0.5257069409}
import LoaderCircleRaw from "components/LoaderCircle";
import styled from "styled-components";

const Wrapper = styled.div`
  box-sizing: border-box;
  border-radius: 4px;
  text-align: center;
  color: ${({ color }) => color};
  background: ${({ background }) => background};
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px;
  border: 1px solid #333;
  padding: 10px;
  cursor: pointer;
  :hover {
    background: #222;
  }
  :active {
    background: #111;
  }
  transition: 0.2s;
`;

const LoaderCircle = styled(LoaderCircleRaw)`
  height: 100%;
  aspect-ratio: 1;
`;

const Icon = styled.img`
  width: 30px;
  filter: invert();
  margin-right: 15px;
`;

const ActionText = styled.div`
  margin-right: 5px;
`;

const Name = styled.div``;

const AuthProvider = ({
  className,
  children,
  background,
  color,
  icon,
  provider,
  onClick,
  method,
  loading,
}) => {
  return (
    <Wrapper
      className={className}
      background={background}
      color={color}
      onClick={onClick}
    >
      {children || (
        <>
          <Icon src={icon} />

          {loading ? (
            <LoaderCircle />
          ) : (
            <>
              <ActionText>
                {method === "login"
                  ? `Log in with`
                  : method === "signup"
                  ? `Sign up with`
                  : `Link `}
              </ActionText>
              <Name>{provider}</Name>
            </>
          )}
        </>
      )}
    </Wrapper>
  );
};

export default AuthProvider;
