"use client";

import { ListCard } from "@/components/home/list-card";
import { EmptyState } from "@/components/home/empty-state";
import { useUserGroups } from "@/hooks/use-user-groups";

export function ListGrid() {
  const { data: groups, isLoading, error } = useUserGroups();

  if (isLoading) {
    return (
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        {Array.from({ length: 3 }).map((_, i) => (
          <div key={i} className="h-24 animate-pulse rounded-lg bg-foreground/5" />
        ))}
      </div>
    );
  }

  if (error) {
    return (
      <p className="text-center text-sm text-red-500 py-8">
        Failed to load lists. Please try again.
      </p>
    );
  }

  if (!groups || groups.length === 0) {
    return <EmptyState />;
  }

  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4" aria-live="polite">
      {groups.map((group) => (
        <ListCard key={group.id} group={group} />
      ))}
    </div>
  );
}