import { UserUploadCard, type UserUploadItem } from "@/admin/components/UserUploadCard";

type UserUploadCategorySectionProps = {
  description: string;
  emptyMessage: string;
  items: UserUploadItem[];
  title: string;
};

export function UserUploadCategorySection({
  description,
  emptyMessage,
  items,
  title
}: UserUploadCategorySectionProps) {
  const pendingCount = items.filter((item) => item.status === "PENDING").length;

  return (
    <section className="glass-panel admin-upload-section">
      <div className="admin-panel-heading">
        <div>
          <span className="pill">
            {pendingCount} pending · {items.length} total
          </span>
          <h2>{title}</h2>
          <p className="muted admin-upload-section__desc">{description}</p>
        </div>
      </div>

      {items.length > 0 ? (
        <div className="admin-upload-grid">
          {items.map((item) => (
            <UserUploadCard item={item} key={`${item.type}-${item.id}`} />
          ))}
        </div>
      ) : (
        <p className="admin-empty-state">{emptyMessage}</p>
      )}
    </section>
  );
}