import delve from 'dlv';

import styles from './last-articles.module.scss';
import {environment} from "../../environments/environment";
import {format} from "date-fns";

/* eslint-disable-next-line */
export interface LastArticlesProps {
  items: object[];
}

export function LastArticles({items = []}: LastArticlesProps) {
  return (
    <div
      className={styles['container'] + " rounded-lg mx-2 md:mx-0 mt-5 md:mt-0 p-5 mb-5 shadow-sm" +
        " bg-white" +
        " dark:bg-gray-800"}>
      <div className="flex items-center justify-between mb-4">
        <h5 className="text-xl font-bold leading-none text-gray-900 dark:text-white">Derniers articles publiés</h5>
      </div>
      <div className="flow-root">
        <ul role="list" className="divide-y divide-gray-200 dark:divide-gray-700">
          {items.map((item: object, index: number) => (<li key={'last-articles-' + index} className="py-3 sm:py-4">
            <div className="flex items-start space-x-4">
              <div className="flex-shrink-0 relative">
                <img className="w-[85px] h-[75px] rounded-lg relative top-1"
                     src={environment.strapiUrl + delve(item, 'attributes.image.data.attributes.formats.medium.url', '')}
                     alt="Neil image"/>
              </div>
              <div className="flex-1 min-w-0">
                <p className="sm:text-normal lg:text-xl font-medium text-gray-900 dark:text-white">
                  {delve(item, 'attributes.title', 'N/A')}
                </p>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  {delve(item, 'attributes.category.data.attributes.name', 'N/A')} - {format(new Date(delve(item, 'attributes.publishedAt', 'Jun 1, 2020')), 'dd/MM/yyyy')}
                </p>
              </div>
            </div>
          </li>))}
        </ul>
      </div>
    </div>
  );
}

export default LastArticles;