"use client";

import type { Domain } from "@mosaic/shared";
import { DomainItem } from "./DomainItem";

interface DomainListProps {
  domains: Domain[];
  isLoading: boolean;
  onEdit?: (domain: Domain) => void;
  onDelete?: (domain: Domain) => void;
}

export function DomainList({
  domains,
  isLoading,
  onEdit,
  onDelete,
}: DomainListProps): React.ReactElement {
  if (isLoading) {
    return (
      <div className="flex justify-center items-center p-8">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"></div>
        <span className="ml-3 text-gray-600">Loading domains...</span>
      </div>
    );
  }

  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
  if (!domains || domains.length === 0) {
    return (
      <div className="text-center p-8 text-gray-500">
        <p className="text-lg">No domains created yet</p>
        <p className="text-sm mt-2">Create domains to organize your tasks and projects</p>
      </div>
    );
  }

  return (
    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
      {domains.map((domain) => (
        <DomainItem
          key={domain.id}
          domain={domain}
          {...(onEdit && { onEdit })}
          {...(onDelete && { onDelete })}
        />
      ))}
    </div>
  );
}