import { Skeleton } from '@theme/components';

export const SummarySkeleton = () => (
  <div className="flex flex-col gap-4" aria-busy="true">
    <section className="overflow-hidden rounded-2xl bg-white shadow-[0_1px_3px_rgba(0,0,0,0.04)] ring-1 ring-black/[0.04]">
      <div className="flex items-baseline justify-between px-6 py-5">
        <Skeleton className="h-5 w-24 bg-gray-200" />
        <Skeleton className="h-3 w-14 bg-gray-200" />
      </div>
      <div className="divide-y divide-gray-100 border-t border-gray-100">
        {Array.from({ length: 2 }).map((_, i) => (
          <div key={i} className="flex gap-3 px-6 py-4">
            <Skeleton className="h-20 w-14 flex-shrink-0 rounded-md bg-gray-200" />
            <div className="flex flex-1 flex-col gap-2">
              <Skeleton className="h-3 w-3/4 bg-gray-200" />
              <Skeleton className="h-3 w-1/2 bg-gray-200" />
              <div className="mt-auto flex justify-between">
                <Skeleton className="h-3 w-16 bg-gray-200" />
                <Skeleton className="h-3 w-12 bg-gray-200" />
              </div>
            </div>
          </div>
        ))}
      </div>
      <div className="space-y-2.5 border-t border-gray-100 px-6 py-5">
        <Skeleton className="h-3 w-full bg-gray-200" />
        <Skeleton className="h-3 w-full bg-gray-200" />
        <Skeleton className="h-3 w-full bg-gray-200" />
      </div>
      <div className="flex items-baseline justify-between border-t border-gray-100 px-6 py-5">
        <Skeleton className="h-4 w-16 bg-gray-200" />
        <Skeleton className="h-7 w-28 bg-gray-200" />
      </div>
    </section>
  </div>
);

export default SummarySkeleton;