import { useParams } from '@tanstack/react-router';

function CollectionDetailsPage() {
  const { name } = useParams();
  const { data: collections, isLoading, isError } = useQuery(['collections'], fetchCollections);

  if (isLoading) return <div>Loading collection...</div>;
  if (isError) return <div>Failed to load collection. Please try again later.</div>;

  const collection = collections?.find((col) => col.name === name);

  if (!collection) return <div>Collection not found.</div>;

  return (
    <div className="space-y-6">
      <h1 className="text-3xl font-bold">{collection.name}</h1>
      <p className="text-muted-foreground">{collection.description}</p>

      <div className="space-y-4">
        <h2 className="text-2xl font-semibold">Articles</h2>
        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {collection.articles.map((article) => (
            <div key={article.id} className="border p-4 rounded-lg">
              <h3 className="text-xl font-semibold">{article.title}</h3>
              <p className="text-sm text-muted-foreground">
                {article.content.substring(0, 100)}...
              </p>
              <a href={article.url} target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:underline">
                Read more
              </a>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

export default CollectionDetailsPage;import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/collections/[name]')({
  component: RouteComponent,
})

function RouteComponent() {
  return <div>Hello "/collections/[name]"!</div>
}