export default async function PortfolioGridServerSide({ apiUrl = "https://deligraph.com/wp-json/wp/v2/portfolio" }) {
	let posts = [];
	let error = null;

	try {
		posts = await fetchPortfolioPosts();
	} catch (err) {
		error = err.message;
	}

	if (error) {
		return (
			<div className='flex justify-center items-center py-12'>
				<p className='text-red-500 text-lg'>Erreur: {error}</p>
			</div>
		);
	}

	return (
		<div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 px-8 py-8'>
			{posts.map((post) => (
				<article
					key={post.id}
					className='bg-white dark:bg-neutral-800 rounded-lg p-6 shadow-md hover:shadow-lg transition-shadow'>
					<h3 className='text-xl font-bold mb-2 text-neutral-800 dark:text-white'>
						{post.title.rendered}
					</h3>
					<p className='text-neutral-600 dark:text-neutral-300 line-clamp-3'>
						{post.content.rendered}
					</p>
				</article>
			))}
		</div>
	);
}