import { useTranslations } from "@/hooks/translations";
import { images } from "../../data";
import styles from "./styles.module.scss";
import { ELocalesPlacement } from "@/locales";

function Partners() {
  const { translate } = useTranslations(ELocalesPlacement.Chats);

  return (
    <div className={styles.container}>
      <h2 className={styles.title}>{translate("/welcome.title_2")}</h2>
      <ul className={styles.list}>
        <li className={styles.item}>
          <div className={styles.newYorkTimes}>
            <img
              alt="The New York Times"
              width="285"
              height="38"
              src={images("new-york-times.webp")}
            />
          </div>
        </li>
        <li className={styles.item}>
          <div className={styles.bustle}>
            <img
              alt="Bustle"
              width="104"
              height="28"
              src={images("bustle.webp")}
            />
          </div>
        </li>
        <li className={styles.item}>
          <div className={styles.hypebae}>
            <img
              alt="Hypebae"
              width="180"
              height="48"
              src={images("hypebae.webp")}
            />
          </div>
        </li>
        <li className={styles.item}>
          <div className={styles.refinery}>
            <img
              alt="Refinery"
              width="98"
              height="60"
              src={images("refinery29.webp")}
            />
          </div>
        </li>
        <li className={styles.item}>
          <div className={styles.cosmopolitan}>
            <img
              alt="Cosmopolitan"
              width="187"
              height="27"
              src={images("cosmopolitian.webp")}
            />
          </div>
        </li>
      </ul>
    </div>
  );
}

export default Partners;
