import { FaCaretRight } from 'react-icons/fa';
import { dataArticle } from './dataArticle';
import ItemArticle from './ItemArticle';

const BoxArticle: React.FC = () => {
  return (
    <div className="box-article-group boder-radius-10">
      <div className="flex items-center justify-between">
        <div className="title-box">
          <h2 className="title-box font-[600]">Tin tức công nghệ</h2>
        </div>
        <a href="/tin-cong-nghe" className="btn-article-group flex items-center gap-1">
          <span>Xem tất cả</span>
          <FaCaretRight size={16} />
        </a>
      </div>
      <div className="list-article-group flex items-center gap-10">
        {dataArticle.slice(0, 4).map((item, index) => (
          <ItemArticle item={item} key={index} />
        ))}
      </div>
    </div>
  );
};

export default BoxArticle;