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

import { useTranslation } from "react-i18next";

import Card from "../services-card/card.component";

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

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

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

  const getImage = (image) => {
    return require(`../../assets/images/main/services/${image}`).default;
  };

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

export default Services;