import Card from "./ServiceCard";
import AlgorithmImg from "../../../assets/imgs/Algorithm.jpg";
import ScheduleImg from "../../../assets/imgs/Schedule.jpg";
import TargetImg from "../../../assets/imgs/Target.jpg";
import ExpandImg from "../../../assets/imgs/Expand.jpg";
import { useTranslation } from "react-i18next";

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

  return (
    <div className="h-full fade-effect flex lg:mt-20 flex-col flex-wrap gap-4 xl:flex-row mx-4">
      <Card
        title={t("services.cards.social.card1.title")}
        description={t("services.cards.social.card1.description")}
        imgSrc={AlgorithmImg}
      />
      <Card
        title={t("services.cards.social.card2.title")}
        description={t("services.cards.social.card2.description")}
        imgSrc={ScheduleImg}
      />
      <Card
        title={t("services.cards.social.card3.title")}
        description={t("services.cards.social.card3.description")}
        imgSrc={TargetImg}
      />
      <Card
        title={t("services.cards.social.card4.title")}
        description={t("services.cards.social.card4.description")}
        imgSrc={ExpandImg}
      />
    </div>
  );
};

export default SocialMediaCards;