// app/blog/page.js
 
// কম্পোনেন্টটিকে async ফাংশন বানানো হয়েছে
export default async function Page() {
  // fetch ব্যবহার করে API থেকে ডেটা আনা হচ্ছে
  const res = await fetch("https://api.vercel.app/blog");
  const posts = await res.json(); // ডেটা'কে JSON ফরম্যাটে রূপান্তর করা হচ্ছে
 
  return (
    <ul>
      {/* posts অ্যারে'র প্রতিটি আইটেমকে ম্যাপ করে দেখানো হচ্ছে */}
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

// app/blog/page.js
 
// আপনার ডাটাবেস ক্লায়েন্ট বা ORM ইম্পোর্ট করুন
import { db, posts } from "@/lib/db";
 
export default async function Page() {
  // ডাটাবেস থেকে সরাসরি সব পোস্ট আনা হচ্ছে
  const allPosts = await db.select().from(posts);
 
  return (
    <ul>
      {allPosts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

// app/blog/page.js
 
import Posts from "@/app/ui/posts";
import { Suspense } from "react";
 
// ডেটা আনার ফাংশন
function getPosts() {
  return fetch("https://api.vercel.app/blog").then((res) => res.json());
}
 
export default function Page() {
  // এখানে ডেটা আনার ফাংশনকে await করা হয়নি, শুধু কল করা হয়েছে
  const postsPromise = getPosts();
 
  return (
    <Suspense fallback={<div>Loading...</div>}>
      {/* Client Component-কে promise-টি prop হিসাবে পাস করা হচ্ছে */}
      <Posts posts={postsPromise} />
    </Suspense>
  );
}

// app/ui/posts.js
 
"use client"; // এটি একটি ক্লায়েন্ট কম্পোনেন্ট
 
import { use } from "react";
 
export default function Posts({ posts }) {
  // use হুক দিয়ে promise থেকে ডেটা পাওয়া পর্যন্ত অপেক্ষা করা হচ্ছে
  const allPosts = use(posts);
 
  return (
    <ul>
      {allPosts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

// app/blog/page.js
 
"use client"; // এটি একটি ক্লায়েন্ট কম্পোনেন্ট
 
import useSWR from "swr";
 
// fetcher ফাংশন যা url থেকে ডেটা এনে JSON হিসাবে রিটার্ন করে
const fetcher = (url) => fetch(url).then((res) => res.json());
 
export default function BlogPage() {
  const { data, error, isLoading } = useSWR(
    "https://api.vercel.app/blog",
    fetcher
  );
 
  // ডেটা লোড হওয়ার সময় এই UI দেখানো হবে
  if (isLoading) return <div>Loading...</div>;
  // কোনো ভুল হলে এই UI দেখানো হবে
  if (error) return <div>Error: {error.message}</div>;
 
  return (
    <ul>
      {data.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

// app/blog/loading.js
 
export default function Loading() {
  // এখানে আপনার লোডিং UI ডিজাইন করুন
  return <div>Loading your blog posts...</div>;
}

// app/blog/page.js
 
import { Suspense } from "react";
import BlogList from "@/components/BlogList";
import BlogListSkeleton from "@/components/BlogListSkeleton"; // একটি কঙ্কাল UI
 
export default function BlogPage() {
  return (
    <div>
      {/* এই অংশটি ক্লায়েন্টে সাথে সাথে পাঠানো হবে */}
      <header>
        <h1>Welcome to the Blog</h1>
      </header>
      <main>
        {/* Suspense দিয়ে মোড়ানো অংশটি স্ট্রিম হবে */}
        <Suspense fallback={<BlogListSkeleton />}>
          <BlogList />
        </Suspense>
      </main>
    </div>
  );
}

// app/artist/[username]/page.js
 
// ... artist এবং playlist আনার ফাংশন ...
 
export default async function Page({ params }) {
  const { username } = await params;
  // প্রথমে আর্টিস্টের তথ্য আনা হচ্ছে
  const artist = await getArtist(username);
 
  return (
    <>
      <h1>{artist.name}</h1>
      <Suspense fallback={<div>Loading playlists...</div>}>
        {/* আর্টিস্টের id পাওয়ার পর প্লে-লিস্ট আনা হচ্ছে */}
        <Playlists artistID={artist.id} />
      </Suspense>
    </>
  );
}
 
async function Playlists({ artistID }) {
  // আর্টিস্টের ID ব্যবহার করে প্লে-লিস্ট আনা হচ্ছে
  const playlists = await getArtistPlaylists(artistID);
 
  return (
    <ul>
      {playlists.map((playlist) => (
        <li key={playlist.id}>{playlist.name}</li>
      ))}
    </ul>
  );
}

// app/artist/[username]/page.js
 
import Albums from "./albums";
 
async function getArtist(username) {
  // ... artist ডেটা আনার কোড ...
}
 
async function getAlbums(username) {
  // ... albums ডেটা আনার কোড ...
}
 
export default async function Page({ params }) {
  const { username } = await params;
 
  // দুটি অনুরোধ একসাথে শুরু করা হচ্ছে
  const artistData = getArtist(username);
  const albumsData = getAlbums(username);
 
  // Promise.all দিয়ে দুটি অনুরোধের ফলাফল পাওয়ার জন্য অপেক্ষা করা হচ্ছে
  const [artist, albums] = await Promise.all([artistData, albumsData]);
 
  return (
    <>
      <h1>{artist.name}</h1>
      <Albums list={albums} />
    </>
  );
}