"use client";

import { PageLayout } from "@/components/templates/PageLayout";
import { ServerIcon } from "@heroicons/react/24/outline";

export function ConfigureLoadingSkeleton() {
  return (
    <PageLayout
      icon={<ServerIcon />}
      title="Configure Internet Service"
      description="Set up your internet service options"
    >
      <div className="max-w-4xl mx-auto">
        {/* Back to plans */}
        <div className="text-center mb-12">
          <div className="h-9 w-44 bg-gray-200 rounded mx-auto mb-6" />
          {/* Title & chips row */}
          <div className="h-10 w-80 bg-gray-200 rounded mx-auto mb-4" />
          <div className="inline-flex items-center gap-3 bg-gray-50 px-6 py-3 rounded-2xl border">
            <div className="h-6 w-20 bg-gray-200 rounded-full" />
            <span className="h-4 w-3 bg-gray-200 rounded" />
            <div className="h-4 w-28 bg-gray-200 rounded" />
            <span className="h-4 w-3 bg-gray-200 rounded" />
            <div className="h-4 w-24 bg-gray-200 rounded" />
          </div>
        </div>

        {/* Steps indicator */}
        <div className="flex items-center justify-between max-w-2xl mx-auto mb-8">
          {Array.from({ length: 4 }).map((_, i) => (
            <div key={i} className="flex-1 flex items-center">
              <div className="h-3 w-3 rounded-full bg-gray-300" />
              {i < 3 && <div className="h-1 flex-1 bg-gray-200 mx-2 rounded" />}
            </div>
          ))}
        </div>

        {/* Step 1 card skeleton */}
        <div className="space-y-8">
          <div className="bg-white border border-gray-200 rounded-xl p-8">
            <div className="mb-6">
              <div className="flex items-center gap-3 mb-2">
                <div className="w-8 h-8 bg-blue-200 rounded-full" />
                <div className="h-6 w-48 bg-gray-200 rounded" />
              </div>
              <div className="h-4 w-64 bg-gray-200 rounded ml-11" />
            </div>
            <div className="space-y-4">
              <div className="h-4 w-full bg-gray-200 rounded" />
              <div className="h-4 w-3/4 bg-gray-200 rounded" />
              <div className="h-4 w-1/2 bg-gray-200 rounded" />
            </div>
          </div>
        </div>
      </div>
    </PageLayout>
  );
}
