const fetchVideo = async (url: string) => {

    try {
        const response = await fetch(url, { next: { revalidate: 7200 } });

        if (!response.ok) {
            console.error(response.statusText);
            return null;
        }

        const data = await response.json();
        // console.log(data)

        return data;
    } catch (error) {
        console.error(error);
        return null;
    }
};

import { fetchCombinedVideos } from "@/fetch-videos";
import VideoOutline from "./video-outline";

type Props = {
    limit: number;
}

type Video = {
    id: {
        kind: string,
        videoId: string,
    }
    snippet: {
        title: string;
        publishedAt: string;
        channelTitle: string;
        thumbnails: {
            default: {
                url: string;
            };
            medium: {
                url: string;
            };
            high: {
                url: string;
            };
        };
    };
};

const VideoPalette = async ({ limit }: Props) => {

    const videos = await fetchCombinedVideos();

    console.log(videos);

    return (
        <div className="w-full h-full flex md:flex-wrap md:flex-row flex-col md:gap-x-12 gap-x-4 md:items-start items-center justify-center md:gap-y-12 gap-y-4">
            {videos.slice(0, limit).map((video: Video, index: number) => (
                <VideoOutline key={index} id={video.id.videoId} thumbnail={video.snippet.thumbnails.high.url} title={video.snippet.title} postDate={video.snippet.publishedAt} channel={video.snippet.channelTitle} />
            ))}
        </div>
    );
}

export default VideoPalette;