"use client";
import React from "react";
import {
  Card,
  CardContent,
  CardHeader,
} from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import { CardSkeletonProps } from "./schema";

// Interface moved to schema.ts

export function CardSkeleton({
  index,
  showFields,
  showViewIcon,
  showUpdateIcon,
}: CardSkeletonProps) {
  return (
    <div key={`loading-${index}`} className="w-full p-1">
      <Card className="h-full">
        <CardHeader className="p-3 pb-0 flex justify-between items-start">
          <Skeleton className="h-5 w-3/4" />
          <div className="flex space-x-1">
            {showViewIcon && (
              <Skeleton className="h-8 w-8 rounded-full" />
            )}
            {showUpdateIcon && (
              <Skeleton className="h-8 w-8 rounded-full" />
            )}
          </div>
        </CardHeader>
        <CardContent className="p-3">
          <div className="space-y-2">
            {showFields.map((field, fieldIndex) => (
              <div key={`loading-${index}-${field}`} className="flex">
                <Skeleton className="h-4 w-10 mr-2" />
                <Skeleton className="h-4 w-full" />
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  );
}