'use client';

import { FaCaretRight } from 'react-icons/fa';
import Link from 'next/link';
import ItemArticleVideo from './ItemArticleVideo';
import { getArticleVideos } from '@/lib/api/article';
import { useApiData } from '@/hooks/useApiData';
import type { Article } from '@/types';
import Skeleton from '@/components/Common/Skeleton';

const BoxArticleVideo: React.FC = () => {
  const { data: videos, isLoading } = useApiData(
    () => getArticleVideos(),
    [],
    { initialData: [] as Article[] },
  );

  return (
    <div className="box-videos-group box-article-group boder-radius-10 relative">
      <div className="flex items-center justify-between">
        <div className="title-box">
          <h2 className="title-box font-[600]">Youtube Channel</h2>
        </div>
        <Link
          href="https://www.youtube.com/NguyenCongPC"
          target="_blank"
          rel="nofollow"
          className="btn-article-group flex items-center gap-2"
        >
          <span>Xem tất cả</span>
          <FaCaretRight size={16} />
        </Link>
      </div>
      <div className="list-videos-group list-article-group flex items-center gap-10">
        {isLoading
          ? Array.from({ length: 4 }).map((_, i) => (
              <div key={i} className="flex flex-1 flex-col gap-2">
                <Skeleton className="aspect-video w-full" />
                <Skeleton className="h-4 w-full" />
                <Skeleton className="h-3 w-3/4" />
              </div>
            ))
          : videos.slice(0, 4).map((item) => (
              <ItemArticleVideo item={item} key={item.id} />
            ))}
      </div>
    </div>
  );
};

export default BoxArticleVideo;