import { Skeleton } from "@/components/ui/skeleton";

export default function DokterLoading() {
  return (
    <div className="space-y-8">
      {/* Hero Section */}
      <div className="bg-background-custom px-6 py-10">
        <div className="max-w-7xl mx-auto">
          <div className="flex flex-col lg:flex-row items-center gap-8">
            {/* Text Content */}
            <div className="flex-1 space-y-6">
              <Skeleton className="w-96 h-14" />
              <Skeleton className="w-[500px] h-8" />
              <div className="flex gap-4">
                <Skeleton className="w-48 h-14 rounded-full" />
                <Skeleton className="w-48 h-14 rounded-full" />
              </div>
            </div>
            {/* Hero Image */}
            <Skeleton className="w-1/2 aspect-square rounded-4xl" />
          </div>
        </div>
      </div>

      {/* Search & Filter Section */}
      <div className="bg-background-custom px-6 py-4">
        <div className="max-w-7xl mx-auto">
          <div className="flex flex-col md:flex-row gap-4">
            <Skeleton className="flex-1 h-14 rounded-full" />
            <div className="flex gap-2">
              <Skeleton className="w-40 h-14 rounded-full" />
              <Skeleton className="w-40 h-14 rounded-full" />
            </div>
          </div>
        </div>
      </div>

      {/* Doctors Grid */}
      <div className="bg-background-custom px-6 py-8">
        <div className="max-w-7xl mx-auto">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
            {[1, 2, 3, 4, 5, 6, 7, 8].map((i) => (
              <div
                key={i}
                className="bg-white rounded-2xl p-6 space-y-4 shadow-sm"
              >
                <div className="flex justify-center">
                  <Skeleton className="w-32 h-32 rounded-full" />
                </div>
                <div className="space-y-2 text-center">
                  <Skeleton className="w-full h-6 mx-auto" />
                  <Skeleton className="w-3/4 h-5 mx-auto" />
                </div>
                <div className="flex justify-center gap-2">
                  <Skeleton className="w-16 h-6 rounded-full" />
                  <Skeleton className="w-16 h-6 rounded-full" />
                </div>
                <Skeleton className="w-full h-12 rounded-full" />
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Pagination */}
      <div className="bg-background-custom px-6 py-8">
        <div className="max-w-7xl mx-auto flex justify-center">
          <div className="flex gap-2">
            <Skeleton className="w-12 h-12 rounded-lg" />
            <Skeleton className="w-12 h-12 rounded-lg" />
            <Skeleton className="w-12 h-12 rounded-lg" />
            <Skeleton className="w-12 h-12 rounded-lg" />
            <Skeleton className="w-12 h-12 rounded-lg" />
          </div>
        </div>
      </div>
    </div>
  );
}