import React from "react";
import "./services.style.scss";

import { useTranslation } from "react-i18next";

import Card from "../services-card/card.component";
import Icon from "../../assets/images/main/services/icon3.svg";

import Circle from "../../assets/images/main/services/circle.png";

const Services = () => {
  const { t, i18n } = useTranslation();

  const cards = t("services.cards", { returnObjects: true });

  return (
    <div className="container services">
      <img src={Circle} alt="circle" className="circle" />
      {/* TODO: Add animated icons */}
      {cards &&
        cards.map((card, i) => (
          <Card icon={Icon} title={card.title} text={card.text} key={i} />
        ))}
    </div>
  );
};

export default Services;
