import type React from 'react';
import { useEffect } from 'react';
import { useAppDispatch } from '../../app/hooks';
import JsonNews_ from '../../assets/news.json';
import nl2br from '../../utils/nl2br';
import Notice from '../notice/Notice';
import { setTitle } from '../page-title/pageTitleSlice';
import styles from './News.module.css';

interface IJsonNewsItem {
  date: string;
  desc: string;
}

type IJsonNews = IJsonNewsItem[];

const JsonNews: IJsonNews = JsonNews_;

const News: React.FC = () => {
  const dispatch = useAppDispatch();
  useEffect(() => {
    dispatch(setTitle("What's new"));
  }, [dispatch]);

  return (
    <div className={styles.news}>
      <Notice />
      {JsonNews.map((item, key) => {
        return (
          // biome-ignore lint/suspicious/noArrayIndexKey: static JSON data
          <div className={styles.item} key={key}>
            <div className={styles.date}>{item.date}</div>
            <div className={styles.desc}>{nl2br(item.desc)}</div>
          </div>
        );
      })}
    </div>
  );
};

export default News;
