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

export default function DeleteHelpArticleLoading() {
  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <Skeleton className="h-8 w-48" />
        <Skeleton className="h-10 w-40" />
      </div>

      <div className="bg-white p-6 rounded-lg shadow">
        <Skeleton className="h-24 w-full mb-6" />

        <div className="space-y-4">
          <div>
            <Skeleton className="h-6 w-40 mb-2" />
            <div className="mt-2 space-y-2">
              <Skeleton className="h-5 w-full" />
              <Skeleton className="h-5 w-3/4" />
              <Skeleton className="h-5 w-1/2" />
              <Skeleton className="h-5 w-1/3" />
            </div>
          </div>

          <Skeleton className="h-px w-full my-4" />

          <div>
            <Skeleton className="h-6 w-40 mb-2" />
            <Skeleton className="h-5 w-full" />
          </div>
        </div>

        <div className="flex justify-end space-x-3 mt-6">
          <Skeleton className="h-10 w-24" />
          <Skeleton className="h-10 w-36" />
        </div>
      </div>
    </div>
  )
}