import { SkeletonLine, SkeletonAvatar } from '@client/components/skeletons/PageSkeletons';

export default function Loading() {
  return (
    <div className="flex gap-5">
      <div className="w-72 shrink-0 space-y-2">
        {Array.from({ length: 3 }).map((_, i) => (
          <div key={i} className="card p-4 flex items-center gap-3">
            <SkeletonLine className="w-9 h-9 rounded-lg shrink-0" />
            <div className="flex-1">
              <SkeletonLine className="h-3.5 w-28 mb-1" />
              <SkeletonLine className="h-2.5 w-20" />
            </div>
          </div>
        ))}
      </div>
      <div className="flex-1 card p-5">
        <SkeletonLine className="h-5 w-40 mb-2" />
        <SkeletonLine className="h-3 w-64 mb-5" />
        <div className="flex gap-2 mb-4">
          {Array.from({ length: 4 }).map((_, i) => (
            <SkeletonLine key={i} className="h-8 w-20 rounded-lg" />
          ))}
        </div>
        <SkeletonLine className="h-32 w-full rounded-lg mb-4" />
        <div className="flex gap-2">
          <SkeletonLine className="h-9 w-24 rounded-lg" />
          <SkeletonLine className="h-9 w-24 rounded-lg" />
        </div>
      </div>
    </div>
  );
}
