'use client';
import React from 'react';
import { Article } from '@/types';
import { ArticleItem } from '@/types/article/TypeArticleCatePage';
import Link from 'next/link';
import Image from 'next/image';

type ItemArticleProps = {
  item: Article | ArticleItem;
};

const ItemArticle: React.FC<ItemArticleProps> = ({ item }) => {
  // chọn link: nếu có external_url thì dùng, ngược lại dùng url
  const linkHref = item.external_url && item.external_url !== '' ? item.external_url : item.url;

  // chọn ảnh: nếu có original thì dùng, ngược lại ảnh mặc định
  const imageSrc =
    item.image?.original && item.image.original !== ''
      ? item.image.original
      : '/static/assets/nguyencong_2023/images/not-image.png';

  // chọn thời gian: ưu tiên article_time, fallback createDate
  const timeDisplay =
    item.article_time && item.article_time !== '' ? item.article_time : item.createDate;

  return (
    <div className="item-article flex gap-3">
      <Link href={linkHref} className="img-article boder-radius-10 position-relative">
        <Image
          className="boder-radius-10"
          src={imageSrc}
          fill
          alt={item.title}
          sizes="(max-width: 768px) 100vw, 265px"
        />
        {/* icon video nếu cần */}
        <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={linkHref} className="title-article">
          <h3 className="line-clamp-2 font-[400]">{item.title}</h3>
        </Link>

        <p className="time-article flex items-center gap-1">
          <i className="sprite sprite-clock-item-article"></i>
          <span>{timeDisplay}</span>
        </p>

        <p className="descreption-article line-clamp-2">{item.summary}</p>
      </div>
    </div>
  );
};

export default ItemArticle;