import { RouteLoading } from "@/components/molecules/RouteLoading";
import { PencilSquareIcon } from "@heroicons/react/24/outline";
import { LoadingCard, Skeleton } from "@/components/atoms/loading-skeleton";

export default function NewSupportLoading() {
  return (
    <RouteLoading
      icon={<PencilSquareIcon />}
      title="Create Support Case"
      description="Preparing form..."
      mode="content"
    >
      <div className="max-w-4xl mx-auto space-y-6">
        <LoadingCard />
        <div className="bg-white border border-gray-200 rounded-lg p-6 space-y-4">
          {Array.from({ length: 6 }).map((_, i) => (
            <div key={i} className="space-y-2">
              <Skeleton className="h-4 w-40" />
              <Skeleton className="h-10 w-full" />
            </div>
          ))}
          <div className="flex justify-end">
            <Skeleton className="h-10 w-32" />
          </div>
        </div>
      </div>
    </RouteLoading>
  );
}
