import React from "react";
import { Col, Row, Container, Badge } from "react-bootstrap";
import agrund from "./Img/agrund.png";
import hashlogics from "./Img/hashlogics.png";
import szerecsen from "./Img/szerecsen.png";
import SATTVA3 from "./Img/SATTVA.png";
import "./Partners.css";
import Heading from "../Heading/Heading";
import { useTranslation } from "react-i18next";
let partnersImages = [
  {
    image: <img src={hashlogics} style={{ maxWidth: "100%" }} alt="" />,
  },
  {
    image: <img src={szerecsen} style={{ maxWidth: "100%" }} alt="" />,
  },
  {
    image: <img src={agrund} style={{ maxWidth: "100%" }} alt="" />,
  },
  {
    image: <img src={SATTVA3} style={{ maxWidth: "100%" }} alt="" />,
  },
];
export default function Partners({ id }) {
  const { t } = useTranslation();
  return (
    <>
      <section className="mt-5 " id={id}>
        <Container className="pt-5 pb-5 divider">
          <div class="text-center pt-5">
            <p
              style={{
                fontFamily: "semibold",
                color: "#EF6074",
                letterSpacing: "2px",
                fontSize: "14px",
                margin: "0px",
                padding: "10px 20px 10px 20px",
                display: "inline",

                backgroundColor: "rgb(239 96 116 / 10%)",

                borderRadius: "2rem",
              }}
            >
              {t("partners.1")}
            </p>

            <Heading
              className="pt-3"
              title={t("partners.2")}
              fontSize="32px"
              fontFamily="semibold"
            />
          </div>

          <Row
            xl={4}
            lg={4}
            md={4}
            sm={3}
            xs={3}
            className="text-center pt-5 d-flex justify-content-center"
          >
            {partnersImages.map((galary) => {
              return (
                <>
                  <Col xl={3} lg={3} md={3} sm={4} xs={4}>
                    {galary.image}
                  </Col>
                </>
              );
            })}
          </Row>
        </Container>
      </section>
    </>
  );
}
