import LoadingSpinner from "./LoadingSpinner";
import EmptyState from "./EmptyState";
import DocumentCard from "./DocumentCard";

interface Attachment {
  id: number;
  file_name: string;
  file_url: string;
  created_on: string;
}

interface AttachmentsTabProps {
  loading: boolean;
  attachments: Attachment[];
  onDownload: (fileUrl: string) => void;
}

export default function AttachmentsTab({ loading, attachments, onDownload }: AttachmentsTabProps) {
  if (loading) return <LoadingSpinner />;
  
  if (attachments.length === 0) {
    return <EmptyState message="No maintenance photos uploaded yet" />;
  }

  return (
    <div className="space-y-4">
      <h3 className="text-lg font-semibold text-gray-800 mb-4">Maintenance Photos</h3>
      <div className="grid gap-3">
        {attachments.map((attachment, index) => (
          <DocumentCard
            key={attachment.id}
            documentType="Maintenance Photo"
            originalName={attachment.file_name || `Photo ${index + 1}`}
            onDownload={() => onDownload(attachment.file_url)}
          />
        ))}
      </div>
    </div>
  );
}