import { apiUrl } from '@/data/constants';
import Link from 'next/link';
import { useRouter } from 'next/router';
import React from 'react';

interface HighlightsProps {
  blogs?: any[]; // Adjust the type according to what blogs should be
}
const Highlights: React.FC<HighlightsProps> = (props) => {
  const blogs = props?.blogs && Array.isArray(props.blogs) && props.blogs.length ? props.blogs : false;
  const { locale } = useRouter();
  return (
    <div className="tw-grid tw-gap-6">
      {blogs &&
        blogs?.map((blog, key) => {
          return (
            <div key={key} className=" ">
              <article className="">
                <div className="card !tw-rounded-t-none">
                  <figure className="card-img-top overlay overlay-1 hover-scale !tw-rounded-t-none">
                    {blog?.thumbnail && (
                      <Link href={blog?.url}>
                        <img
                          src={apiUrl + blog?.thumbnail?.url}
                          alt={blog?.title}
                          width={blog?.thumbnail?.width}
                          height={blog?.thumbnail?.height}
                          className="!tw-rounded-t-none"
                        />
                      </Link>
                    )}
                    <figcaption>
                      <h5 className="from-top mb-0 tw-font-inter">{locale === 'es' ? 'Leer Más' : 'Read More'}</h5>
                    </figcaption>
                  </figure>
                  <div className="card-body border !tw-border-y-0 !tw-border-main-color">
                    <div className="post-header">
                      <div className="">
                        <Link
                          href={'/blog?category=' + blog?.blogCategory?.slug}
                          className="hover tw-font-ibm tw-text-main-color tw-font-semibold tw-text-sm tw-uppercase"
                          rel="category"
                        >
                          {' '}
                          · {blog?.blogCategory?.name}
                        </Link>
                      </div>
                      <h2 className=" h3 mt-1 mb-3">
                        <Link
                          className="tw-text-main-dark hover:tw-text-main-color tw-font-inter tw-font-semibold tw-text-2xl md:tw-text-[32px]"
                          href={blog?.url}
                        >
                          {blog?.title}
                        </Link>
                      </h2>
                    </div>
                    <div className="post-content">
                      <p className="base-text !tw-font-ibm !tw-text-secondary-dark">{blog?.preview}</p>
                    </div>
                  </div>
                  <div className="card-footer  border !tw-border-main-color">
                    <ul className="post-meta d-flex mb-0">
                      <li className="post-date tw-text-xs md:tw-text-sm tw-text-[#D4D4D4] tw-font-semibold tw-font-inter ">
                        <i className="uil uil-calendar-alt"></i>
                        <span>{blog?.date}</span>
                      </li>
                    </ul>
                  </div>
                </div>
              </article>
            </div>
          );
        })}
    </div>
  );
};

export default Highlights;