"use client"

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

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