import * as React from "react";
import { memo } from "react";
import { LoginCard as LoginCardStyled, ButtonContainer } from "./styled";
import Button from "../../components/ui/button";
import Typography from "../../components/ui/typography";
import { useContentProvider } from "../../providers/content-provider";
function LoginCard({ onSetVisible }: any) {
  const {
    content: { signIn },
  } = useContentProvider();
  return (
    <LoginCardStyled>
      <Typography align="center" variant="title3">
        {signIn.LOGIN_MESSAGE}
      </Typography>
      <ButtonContainer>
        <Button
          textProps={{ style: { fontSize: 22 } }}
          variant="filled"
          onPress={() => {
            onSetVisible(true);
          }}
          label={signIn.LOGIN}
        />
      </ButtonContainer>
    </LoginCardStyled>
  );
}

export default memo(LoginCard);