import { Button, Card, Col, Row } from "antd";
import LoyaltyIcon from "components/Icons/cart/LoyaltyIcons";
import PresentIcon from "components/Icons/cart/PresentIcon";
import { useTranslation } from "react-i18next";
import { colors } from "../../ThemeConstants";
import ProText from "../ProText";
import styles from "./LoyaltyCard.module.css";

const LoyaltyCard = () => {
  const { t } = useTranslation();
  return (
    <div className={styles.loyaltyContainer}>
      <Card className={styles.loyaltyCard}>
        <Row
          justify="space-between"
          align="middle"
          style={{ marginBottom: "0.5rem" }}
        >
          <Col>
            <Row align="middle" gutter={[8, 8]}>
              <Col>
                <LoyaltyIcon className={styles.loyaltyIcon} />
              </Col>
              <Col>
                <ProText style={{ fontSize: "1rem", fontWeight: 400 }}>
                  {t("menu.loyaltyPoints")}
                </ProText>
              </Col>
            </Row>
            <ProText
              type="secondary"
              strong
              style={{
                fontSize: "14px",
                fontWeight: 700,
                position: "relative",
                top: -2,
              }}
            >
              {t("menu.loyaltyDescription")}
            </ProText>
          </Col>
          <Col>
            <PresentIcon />
          </Col>
        </Row>
        <Row justify="space-between" align="middle">
          <Col>
            <div className={styles.presentIcon}>
              <div style={{ display: "flex" }}>
                {["#006347", "#e23000", "#006d34", "#006db7", "#e40000"].map(
                  (color) => (
                    <div key={color} className={styles.presentIconItem} />
                  )
                )}
              </div>
            </div>
          </Col>
          <Col>
            <Button
              style={{
                backgroundColor: colors.primary,
                color: "white",
                border: 0,
                height: 32,
              }}
            >
              {t("menu.claim")}
            </Button>
          </Col>
        </Row>
      </Card>
    </div>
  );
};

export default LoyaltyCard;
