import { RouteLoading } from "@/components/molecules/RouteLoading";
import { Server } from "lucide-react";
import { Skeleton } from "@/components/atoms/loading-skeleton";

export default function AccountServicesLoading() {
  return (
    <RouteLoading
      icon={<Server />}
      title="Services"
      description="View and manage your services"
      mode="content"
    >
      <div className="space-y-6">
        {/* Stats Cards */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          {Array.from({ length: 3 }).map((_, i) => (
            <div key={i} className="bg-card rounded-xl border border-border p-5 shadow-sm">
              <div className="flex items-center gap-4">
                <Skeleton className="h-10 w-10 rounded-lg" />
                <div className="space-y-2">
                  <Skeleton className="h-4 w-20" />
                  <Skeleton className="h-6 w-12" />
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* Search and Table */}
        <div className="bg-card rounded-xl border border-border shadow-sm overflow-hidden">
          <div className="px-6 py-4 border-b border-border">
            <Skeleton className="h-10 w-full max-w-md rounded-lg" />
          </div>
          <div className="p-0">
            {/* Custom Table Skeleton to match embedded style */}
            <div className="w-full">
              <div className="border-b border-border p-4">
                <div className="grid grid-cols-5 gap-4">
                  {Array.from({ length: 5 }).map((_, i) => (
                    <Skeleton key={i} className="h-4 w-20" />
                  ))}
                </div>
              </div>
              <div className="divide-y divide-border">
                {Array.from({ length: 5 }).map((_, rowIndex) => (
                  <div key={rowIndex} className="p-4">
                    <div className="grid grid-cols-5 gap-4">
                      {Array.from({ length: 5 }).map((_, colIndex) => (
                        <Skeleton key={colIndex} className="h-4 w-full" />
                      ))}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </RouteLoading>
  );
}