import React, { useContext } from 'react';
import {
  BannerImage,
  BannerSubtitle,
  BannerTitle,
  BannerWrapper,
} from "./styles";
import BannerImg from "./assets/banner.png";
import Button from "../button";
import { FaArrowRight } from "react-icons/fa";
import useTranslation from "../../hooks/useTranslation.jsx";
import wordStore from "../../mc/wordStore.json";
const Banner = ({ findText }) => {
  return (
    <BannerWrapper>
      <BannerTitle>
        {" "}
        {findText("Learn languages, anytime, anywhere.")}
      </BannerTitle>
      <BannerSubtitle>
        {findText(
          `Join millions of users from all over the world to learn foreign languages`
        )}
      </BannerSubtitle>
      <BannerImage src={BannerImg} alt={findText("Banner")} />
      <Button
        type="primary"
        text={findText("Get started")}
        icon={{
          jsx: FaArrowRight,
          right: true,
        }}
        styles={{
          marginTop: "29px",
          fontSize: "16px",
          width: "200px",
          gap: "8px",
        }}
      />
    </BannerWrapper>
  );
};
export default Banner;
