import Card from "../../Card";
import yourself from "../../../assets/Yourself.svg"
import staff from "../../../assets/Staff.svg"
import agency from "../../../assets/Agency.svg"
import { useTranslation } from "react-i18next";

const CardContainer = () => {

  const { t } = useTranslation();

  return (
    <div className="mt-10 lg:mt-16 flex gap-5 lg:gap-6 flex-col h-full lg:flex-row px-10 lg:px-32 1920:margin-calc">
      <Card
        title={t("optimization.cards.card1.title")}
        description={t("optimization.cards.card1.description")}
        image={yourself}
        index={0}
      />
      <Card
        title={t("optimization.cards.card2.title")}
        description={t("optimization.cards.card2.description")}
        image={staff}
        index={1}
      />
      <Card
        title={t("optimization.cards.card3.title")}
        description={t("optimization.cards.card3.description")}
        image={agency}
        index={2}
      />
    </div>
  );
};

export default CardContainer;