export default function ReportsLoading() {
  return (
    <div className="animate-pulse" aria-busy="true" aria-label="جار تحميل التقارير">
      <div className="h-8 w-52 rounded-md bg-slate-200" />
      <div className="mt-3 h-4 w-full max-w-xl rounded-md bg-slate-200" />
      <div className="mt-7 grid gap-3 rounded-lg border bg-white p-4 sm:grid-cols-2 xl:grid-cols-5">
        {Array.from({ length: 5 }, (_, index) => (
          <div key={index} className="h-11 rounded-md bg-slate-100" />
        ))}
      </div>
      <div className="mt-5 grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
        {Array.from({ length: 8 }, (_, index) => (
          <div key={index} className="h-28 rounded-lg border bg-white p-4">
            <div className="h-3 w-3/4 rounded bg-slate-200" />
            <div className="mt-5 h-7 w-1/2 rounded bg-slate-200" />
          </div>
        ))}
      </div>
      <div className="mt-10 h-6 w-64 rounded bg-slate-200" />
      <div className="mt-5 grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
        {Array.from({ length: 9 }, (_, index) => (
          <div key={index} className="h-28 rounded-lg border bg-white p-4">
            <div className="h-3 w-3/4 rounded bg-slate-200" />
            <div className="mt-5 h-7 w-1/2 rounded bg-slate-200" />
          </div>
        ))}
      </div>
      <div className="mt-9 grid gap-4 xl:grid-cols-2">
        {Array.from({ length: 4 }, (_, index) => (
          <div key={index} className="h-80 rounded-lg border bg-white p-4">
            <div className="h-4 w-40 rounded bg-slate-200" />
            <div className="mt-8 h-56 rounded-md bg-slate-100" />
          </div>
        ))}
      </div>
    </div>
  );
}
