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 "./Ads2.module.css";

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

  return (
    <div className={styles.adsContainer}>
      {isRTL ? (
        <LeftRectangle className={styles.leftRectangle} />
      ) : (
        <RightRectangle className={styles.rightRectangle} />
      )}
      <Card className={styles.adsCard}>
        <ProTitle
          style={{
            marginTop: 5,
            fontSize: 14,
          }}
        >
          {t("home.promotion.description")}
        </ProTitle>

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

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