import ItemArticle from '@/components/Common/ItemArticle';
import { DataListArticleNews } from '@/data/article/ListArticleNews';
import Link from 'next/link';
import Image from 'next/image';

export const BoxArticleMid = () => {
  return (
    <div className="box-article-home-middle grid grid-cols-3 gap-2">
      <div className="box-article-tech col-left-article boder-radius-10 border-box-article col-span-2">
        <p className="title-box-article font-[600]">Tin công nghệ</p>
        <div className="list-article-tech">
          {DataListArticleNews.slice(0, 9).map((item, index) => (
            <ItemArticle item={item} key={index} />
          ))}
        </div>
        <Link
          href="/tin-cong-nghe"
          className="btn-article-col flex items-center justify-center gap-2 font-[500]"
        >
          Xem tất cả
        </Link>
      </div>
      <div className="col-right-article flex-1">
        <div className="box-article-hot border-box-article boder-radius-10">
          <p className="title-box-article font-bold">Tin nổi bật</p>
          <div className="list-article-hot">
            {DataListArticleNews.slice(0, 5).map((item, index) => (
              <div className="item-article flex gap-4" key={index}>
                <Link href={item.url} className="img-article boder-radius-10 relative">
                  <Image
                    className="boder-radius-10"
                    src={item.image.original}
                    fill
                    alt={item.title}
                  />

                  <i className="sprite sprite-icon-play-video-detail icon-video-feature incon-play-youtube"></i>
                  <i className="sprite sprite-play-youtube incon-play-youtube"></i>
                </Link>
                <div className="content-article content-article-item flex flex-1 flex-col">
                  <Link href="/tuyen-dung-nhan-vien-ky-thuat-1-2" className="title-article">
                    <h3 className="line-clamp-2 font-[400]">{item.title}</h3>
                  </Link>
                  <p className="time-article flex items-center gap-2">
                    <i className="sprite sprite-clock-item-article"></i>
                    <span>{item.createDate}</span>
                  </p>
                  <p className="descreption-article line-clamp-2">{item.summary}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};