import delve from 'dlv';
import {format} from 'date-fns';

import styles from './card-blog.module.scss';
import {getCategoryUrl, getPostUrl, getStrapiImage} from "../../libs/utils";

/* eslint-disable-next-line */
export interface CardBlogProps {
  item: object;
}

export function CardBlog({item}: CardBlogProps) {
  return (
    <div className={styles['card-blog-container'] + " rounded-lg overflow-hidden shadow-sm" +
      " bg-white" +
      " dark:bg-gray-800"}>
      <div className="md:flex">
        <div className="md:shrink-0">
          <img className="h-48 w-full object-cover md:h-full md:w-48 rounded-t-lg"
               src={getStrapiImage(item, 'medium')}
               alt="Modern building architecture" />
        </div>
        <div className="p-4 md:p-8 w-full">
          <div className="flex justify-between items-center">
            <span
              className="font-light text-sm
              text-gray-600
              dark:text-gray-300">{format(new Date(delve(item, 'attributes.publishedAt', 'Jun 1, 2020')), 'dd/MM/yyyy')}</span>
            <a href={getCategoryUrl(item)}
               title={"Accédez à la catégorie " + delve(item, 'attributes.category.data.attributes.name', 'N/A')}
               aria-label={"Accédez à la catégorie " + delve(item, 'attributes.category.data.attributes.name', 'N/A')}
               className="px-2 py-1 text-sm font-bold rounded
               bg-gray-600 text-gray-100
               hover:bg-gray-500">
              {delve(item, 'attributes.category.data.attributes.name', 'N/A')}
            </a>
          </div>
          <div className="mt-2">
            <a
              title={"Lire l'article " + delve(item, 'attributes.title', 'N/A')}
              aria-label={"Lire l'article " + delve(item, 'attributes.title', 'N/A')}
              href={getPostUrl(item)}
              className="text-xl font-bold hover:underline
              text-gray-700
              dark:text-gray-200">
              {delve(item, 'attributes.title', 'N/A')}
            </a>
            <p className="mt-2 font-light text-sm
            text-gray-600
            dark:text-gray-300">{delve(item, 'attributes.description', 'N/A')}</p>
          </div>
          <div className="flex justify-between items-center mt-4">
            <a href={getPostUrl(item)}
               title={"Lire l'article " + delve(item, 'attributes.title', 'N/A')}
               aria-label={"Lire l'article " + delve(item, 'attributes.title', 'N/A')}
               className="text-blue-500 text-sm hover:underline">Lire l'article</a>
            <div>
              <span className="flex items-center">
                <img
                  src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=731&amp;q=80"
                  alt="avatar"
                  width="auto"
                  height="auto"
                  className="mx-4 w-10 h-10 object-cover rounded-full hidden sm:block" />
                <h3 className="text-normal font-bold hover:underline
                text-gray-700
                dark:text-gray-300">Alex John</h3>
              </span>
            </div>
          </div>
        </div>

      </div>

    </div>
  );
}

export default CardBlog;