import delve from 'dlv';
import { format } from 'date-fns';
import {environment} from '../../environments/environment';

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

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

export function CardBlog({item}: CardBlogProps) {
  return (
    <div className={styles['card-blog-container'] + " bg-white rounded-l overflow-hidden shadow-sm"}>
      <div className="md:flex">
        <div className="md:shrink-0">
          <img className="h-48 w-full object-cover md:h-full md:w-48"
               src={environment.strapiUrl + delve(item, 'attributes.image.data.attributes.formats.medium.url', '')}
               alt="Modern building architecture"/>
        </div>
        <div className="p-8 w-full">
          <div className="flex justify-between items-center">
            <span
              className="font-light text-gray-600 text-sm">{format(new Date(delve(item, 'attributes.publishedAt', 'Jun 1, 2020')),'dd/MM/yyyy')}</span>
            <a href={getCategoryUrl(item)}
               className="px-2 py-1 text-sm bg-gray-600 text-gray-100 font-bold rounded hover:bg-gray-500">
              {delve(item, 'attributes.category.data.attributes.name', 'N/A')}
            </a>
          </div>
          <div className="mt-2">
            <a
              href={getPostUrl(item)}
              className="text-xl text-gray-700 font-bold hover:underline">
              {delve(item, 'attributes.title', 'N/A')}
            </a>
            <p className="mt-2 font-light text-sm text-gray-600">{delve(item, 'attributes.description', 'N/A')}</p>
          </div>
          <div className="flex justify-between items-center mt-4">
            <a href={getPostUrl(item)} className="text-blue-500 text-sm hover:underline">Lire l'article</a>
            <div>
              <a href="#" 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" className="mx-4 w-10 h-10 object-cover rounded-full hidden sm:block"/>
                <h3 className="text-gray-700 text-normal font-bold hover:underline">Alex John</h3>
              </a>
            </div>
          </div>
        </div>

      </div>

    </div>
  );
}

export default CardBlog;