"use client";

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

export function LoadingSkeleton() {
  return (
    <PageLayout title="Configure SIM" icon={<DevicePhoneMobileIcon className="h-6 w-6" />}>
      <div className="max-w-4xl mx-auto space-y-8">
        {/* Header card skeleton */}
        <div className="bg-card rounded-xl border border-border p-6 shadow-[var(--cp-shadow-1)]">
          <div className="flex justify-between items-start">
            <div className="space-y-3">
              <div className="flex items-center gap-2">
                <div className="h-5 w-5 bg-accent rounded" />
                <div className="h-5 w-48 bg-muted rounded" />
                <div className="h-5 w-24 bg-success-soft rounded-full" />
              </div>
              <div className="flex items-center gap-4">
                <div className="h-4 w-24 bg-muted rounded" />
                <div className="h-4 w-28 bg-muted rounded" />
              </div>
            </div>
            <div className="text-right space-y-2">
              <div className="h-7 w-24 bg-accent rounded" />
              <div className="h-4 w-28 bg-success-soft rounded" />
            </div>
          </div>
        </div>

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

        {/* Step 1 card skeleton */}
        <div className="bg-card rounded-xl border border-border p-8 shadow-[var(--cp-shadow-1)]">
          <div className="mb-6">
            <div className="h-5 w-48 bg-muted rounded mb-2" />
            <div className="h-4 w-72 bg-muted rounded" />
          </div>
          <div className="h-10 w-full bg-muted rounded mb-4" />
          <div className="h-10 w-72 bg-muted rounded ml-auto" />
        </div>
      </div>
    </PageLayout>
  );
}
