"use client";
import React from "react";
import { CardItem } from "./CardItem";
import { CardSkeleton } from "./CardSkeleton";
import { getFieldValue, getGridClasses } from "./utils";
import { CardDisplayProps } from "./schema";

// Interface moved to schema.ts

export function CardDisplay<T>({
  showFields,
  data,
  lang,
  translations,
  error,
  loading,
  titleField = "name",
  onCardClick,
  renderCustomField,
  gridCols = 4,
  showViewIcon = false,
  showUpdateIcon = false,
  onViewClick,
  onUpdateClick,
}: CardDisplayProps<T>) {
  if (error) {
    return (
      <div className="p-6 text-center text-red-500">
        {error.message || "An error occurred while fetching data."}
      </div>
    );
  }

  return (
    <div className={getGridClasses(gridCols)}>
      {loading ? (
        // Loading skeletons
        Array.from({ length: 10 }).map((_, index) => (
          <CardSkeleton
            key={`loading-${index}`}
            index={index}
            showFields={showFields}
            showViewIcon={showViewIcon}
            showUpdateIcon={showUpdateIcon}
          />
        ))
      ) : data.length === 0 ? (
        <div className="col-span-full text-center py-6">
          {(translations[lang] || {}).noData || "No data found"}
        </div>
      ) : (
        data.map((item, index) => (
          <CardItem
            key={index}
            item={item}
            index={index}
            showFields={showFields}
            titleField={titleField}
            lang={lang}
            translations={translations}
            onCardClick={onCardClick}
            renderCustomField={renderCustomField}
            showViewIcon={showViewIcon}
            showUpdateIcon={showUpdateIcon}
            onViewClick={onViewClick}
            onUpdateClick={onUpdateClick}
            getFieldValue={getFieldValue}
          />
        ))
      )}
    </div>
  );
}