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 rounded-lg relative p-6 flex flex-col justify-center items-center"
            >
              <div className="relative text-center w-full">
                <Skeleton className="h-8 w-16 mx-auto mb-2 bg-surface-nest-normal" />
              </div>
              <Skeleton className="h-4 w-12 mt-2 bg-surface-nest-normal" />
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

export default RechargeListSkeleton
