'use client';
import React from 'react';
import Link from 'next/link';
import { Breadcrumb } from '@components/Common/Breadcrumb';
import { DataArticleCategory } from '@/data/article/ListCategory';

import { ArticleTopLeft } from './HomeArticle/ArticleTopLeft';
import { ArticleTopRight } from './HomeArticle/ArticleTopRight';
import { BoxVideoArticle } from './HomeArticle/BoxVideoArticle';
import { BoxArticleMid } from './HomeArticle/BoxArticleMid';
import { BoxArticleReview } from './HomeArticle/BoxArticleReview';

const ArticleHome = () => {
  const breadcrumbItems = [{ name: 'Tin tức', url: '/tin-tuc' }];

  return (
    <section className="page-article pb-10">
      <div className="container">
        <Breadcrumb items={breadcrumbItems} />

        <div className="tabs-category-article flex items-center">
          {DataArticleCategory.map((item, index) => (
            <Link href={item.url} key={index} className="item-tab-article">
              <h2 className="title-cate-article font-[400]">{item.title}</h2>
            </Link>
          ))}
        </div>

        <div className="box-article-home-top flex gap-3">
          <div className="col-left-article border-box-article box-new-article boder-radius-10">
            <div className="flex gap-12">
              <ArticleTopLeft />
            </div>
          </div>
          <ArticleTopRight />
        </div>

        {/* box video */}
        <BoxVideoArticle />

        {/* box mid  */}
        <BoxArticleMid />

        {/* review */}
        <BoxArticleReview />
      </div>
    </section>
  );
};

export default ArticleHome;