'use client'

const SubscribeProductItemSkeleton = () => {
  return (
    <div className="bg-surface-nest-normal rounded-m relative flex items-center justify-between px-6 py-8">
      {/* 左侧标题和副标题骨架 */}
      <div className="flex items-end gap-1">
        <div className="bg-surface-fill-subtle h-6 w-20 animate-pulse rounded"></div>
        <div className="bg-surface-fill-subtle h-4 w-16 animate-pulse rounded"></div>
      </div>

      {/* 右侧价格和复选框骨架 */}
      <div className="flex items-center gap-2">
        <div className="flex items-end gap-1">
          <div className="bg-surface-fill-subtle h-8 w-12 animate-pulse rounded"></div>
          <div className="bg-surface-fill-subtle h-6 w-8 animate-pulse rounded"></div>
        </div>
        <div className="bg-surface-fill-subtle h-6 w-6 animate-pulse rounded-full"></div>
      </div>
    </div>
  )
}

const SubscribeProductsSkeleton = () => {
  return (
    <div className="w-full space-y-6 px-6">
      {Array.from({ length: 3 }).map((_, index) => (
        <SubscribeProductItemSkeleton key={index} />
      ))}
    </div>
  )
}

export default SubscribeProductsSkeleton
