import { Card } from "antd";
import BuildIcon from "components/Icons/ads/BuildIcon";
import LeftRectangle from "components/Icons/LeftRectangle";
import RightRectangle from "components/Icons/RightRectangle";
import ProText from "components/ProText";
import ProTitle from "components/ProTitle";
import { useTranslation } from "react-i18next";
import { useAppSelector } from "redux/hooks";
import styles from "./Ads1.module.css";

export default function Ads1({ className }: { className?: string }) {
  const { isRTL } = useAppSelector((state) => state.locale);
  const { t } = useTranslation();

  return (
    <div className={styles.adsContainer + className}>
      {isRTL ? (
        <LeftRectangle className={styles.leftRectangle} />
      ) : (
        <RightRectangle className={styles.rightRectangle} />
      )}
      <Card
        className={styles.adsCard}
        style={{
          textAlign: isRTL ? "right" : "left",
        }}
      >
        <ProTitle
          style={{
            fontFamily: "Roboto",
            fontWeight: 600,
            fontStyle: "SemiBold",
            fontSize: 16,
            lineHeight: "100%",
            letterSpacing: "2%",
          }}
        >
          {t("home.promotion.description")}
        </ProTitle>

        <ProText
          style={{
            marginTop: 5,
            fontSize: 14,
            color:"#00AC17"
          }}
        >
          {t("home.promotion.title")}
        </ProText>

        <div
          style={{
            position: "absolute",
            [isRTL ? "left" : "right"]: 5,
            top: 5,
            zIndex: 11,
          }}
        >
          <BuildIcon />
        </div>
      </Card>
    </div>
  );
}