async function fetchGenre(slug:string){
  const res = await fetch(`${process.env.NEXT_PUBLIC_API_BASE}/films?q=&genre=${slug}`, { cache:'no-store' });
  return res.json();
}
export default async function Page({ params }:{ params:{ slug:string }}){
  const films = await fetchGenre(params.slug);
  return (
    <main className="card">
      <h1 className="text-xl font-semibold mb-3 capitalize">Genre: {params.slug}</h1>
      <div className="grid md:grid-cols-4 gap-4">
        {films.map((f:any)=>(
          <a key={f.id} className="block" href={`/film/${f.slug}`}>
            <img className="rounded-xl w-full aspect-[2/3] object-cover" src={f.posterUrl || 'https://picsum.photos/300/450'} alt={f.title} />
            <div className="mt-2 text-sm">{f.title}</div>
          </a>
        ))}
      </div>
    </main>
  );
}