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

const RechargeListSkeleton = () => {
  return (
    <div>
      <div className="flex flex-col gap-4">
        <h2 className="txt-title-m text-txt-primary-normal">Recharge</h2>

        <div className="grid grid-cols-3 gap-4">
          {Array.from({ length: 6 }).map((_, index) => (
            <div
              key={index}
              className="bg-surface-base-normal relative flex flex-col items-center justify-center rounded-lg p-6"
            >
              <div className="relative w-full text-center">
                <Skeleton className="bg-surface-nest-normal mx-auto mb-2 h-8 w-16" />
              </div>
              <Skeleton className="bg-surface-nest-normal mt-2 h-4 w-12" />
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

export default RechargeListSkeleton
