import { Skeleton } from '@admin/components/ui/skeleton'

const ICON_SKELETON_KEYS = Array.from({ length: 40 }, (_, index) => `icon-skeleton-${index}`)

export function IconsColumnSkeleton() {
  return (
    <div className="flex w-full flex-col gap-2">
      <Skeleton className="h-4 w-1/2 rounded-md" />
      <div className="grid w-full grid-cols-5 gap-2">
        {ICON_SKELETON_KEYS.map((key) => (
          <Skeleton key={key} className="h-10 w-10 rounded-md" />
        ))}
      </div>
    </div>
  )
}