import { useMessages, useTranslations } from "next-intl";

import { Grid, Icon, IconName, Typography } from "@/components/ui";

import styles from "./BenefitsList.module.scss";

export default function BenefitsList() {
  const t = useTranslations("RefillOptionsModal.benefits");

  const messages = useMessages();
  const keys = Object.keys(messages.RefillOptionsModal.benefits);

  const icons = [
    IconName.Thunderbolt,
    IconName.Shield,
    IconName.Check,
    IconName.Star,
  ];

  return (
    <Grid columns={2} gap={16} className={styles.benefits}>
      {keys.map((key, idx) => (
        <div className={styles.benefit} key={key}>
          <div className={styles.header}>
            {icons[idx] && (
              <Icon
                name={icons[idx]}
                color="#3B82F6"
                size={{ height: 18, width: 18 }}
              />
            )}
            <Typography
              size="sm"
              weight="semiBold"
              align="left"
              className={styles.title}
            >
              {t(`${key}.title`)}
            </Typography>
          </div>
          <Typography size="sm" align="left" color="secondary">
            {t(`${key}.description`)}
          </Typography>
        </div>
      ))}
    </Grid>
  );
}
