import { Card, CardContent } from '@admin/components/ui/card'
import { Skeleton } from '@admin/components/ui/skeleton'

export function ContentSkeleton() {
  return (
    <div className="relative z-10 flex h-[50svh] items-center justify-center px-4">
      <div className="relative w-full max-w-xl" aria-hidden="true">
        <Card size="sm" className="absolute top-1 left-1/2 h-24 w-[72%] -translate-x-1/2 rotate-3">
          <CardContent className="flex h-full items-start gap-3 p-3">
            <Skeleton className="size-8 shrink-0 rounded-md" />
            <div className="flex min-w-0 flex-1 flex-col gap-2 pt-1">
              <Skeleton className="h-4 w-full rounded-md" />
              <Skeleton className="h-3 w-[78%] rounded-md" />
            </div>
            <Skeleton className="h-6 w-14 shrink-0 rounded-md" />
          </CardContent>
        </Card>

        <Card size="sm" className="absolute top-10 right-2 h-36 w-[50%] rotate-6">
          <CardContent className="flex h-full flex-col gap-4 p-4">
            <Skeleton className="ml-auto h-6 w-14 rounded-md" />
            <div className="flex flex-col gap-3 pt-2">
              <Skeleton className="h-4 w-full rounded-md" />
              <Skeleton className="h-4 w-[88%] rounded-md" />
            </div>
            <Skeleton className="mt-auto h-4 w-[78%] rounded-md" />
          </CardContent>
        </Card>

        <Card size="sm" className="absolute top-12 left-0 h-36 w-[78%] -rotate-2">
          <CardContent className="flex h-full gap-4 p-4">
            <Skeleton className="h-full w-[27%] shrink-0 rounded-md" />
            <div className="flex min-w-0 flex-1 flex-col gap-3">
              <Skeleton className="h-8 w-full rounded-md" />
              <Skeleton className="h-9 w-[94%] rounded-md" />
              <Skeleton className="h-3 w-[70%] rounded-md" />
            </div>
            <Skeleton className="h-6 w-14 shrink-0 rounded-md" />
          </CardContent>
        </Card>
      </div>
    </div>
  )
}