import Card from "./ServiceCard";
import IdealizeImg from "../../../assets/imgs/Idealize.png";
import DesignImg from "../../../assets/imgs/Design.png";
import CodeImg from "../../../assets/imgs/Code.jpg";
import BuildImg from "../../../assets/imgs/Build.png";
import { useTranslation } from "react-i18next";

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

  return (
    <div className="h-full flex lg:mt-20 flex-col flex-wrap gap-4 xl:flex-row mx-4">
      <Card
        title={t("services.cards.website.card1.title")}
        description={t("services.cards.website.card1.description")}
        imgSrc={IdealizeImg}
        delay="0s"
      />
      <Card
        title={t("services.cards.website.card2.title")}
        description={t("services.cards.website.card2.description")}
        imgSrc={DesignImg}
        delay="0.1s"
      />
      <Card
        title={t("services.cards.website.card3.title")}
        description={t("services.cards.website.card3.description")}
        imgSrc={CodeImg}
        delay="0.2s"
      />
      <Card
        title={t("services.cards.website.card4.title")}
        description={t("services.cards.website.card4.description")}
        imgSrc={BuildImg}
        delay="0.3s"
      />
    </div>
  );
};

export default WesiteCards;