'use client'

import React from 'react'

import { Card } from '@/components/ui/card'

export function ProductCardSkeleton() {
  return (
    <Card className="bg-white/10 backdrop-blur border-white/20 p-3 animate-pulse">
      <div className="space-y-3">
        {/* Изображение */}
        <div className="relative">
          <div className="aspect-square bg-white/20 rounded-lg"></div>
          {/* Бейджи */}
          <div className="absolute top-2 right-2">
            <div className="w-10 h-5 bg-white/30 rounded"></div>
          </div>
        </div>

        {/* Информация о товаре */}
        <div className="space-y-2">
          {/* Бренд и номер */}
          <div className="flex items-center justify-between">
            <div className="w-16 h-4 bg-white/20 rounded"></div>
            <div className="w-12 h-3 bg-white/15 rounded"></div>
          </div>

          {/* Название */}
          <div className="space-y-1">
            <div className="w-full h-4 bg-white/20 rounded"></div>
            <div className="w-3/4 h-4 bg-white/15 rounded"></div>
          </div>
        </div>

        {/* Разделитель */}
        <div className="border-t border-white/10 pt-2">
          <div className="w-2/3 h-3 bg-white/15 rounded mx-auto"></div>
        </div>

        {/* Управление */}
        <div className="space-y-2 bg-white/5 rounded-lg p-2">
          {/* Кнопки количества */}
          <div className="flex items-center space-x-1">
            <div className="h-6 w-6 bg-white/20 rounded"></div>
            <div className="flex-1 h-6 bg-white/20 rounded"></div>
            <div className="h-6 w-6 bg-white/20 rounded"></div>
          </div>
        </div>
      </div>
    </Card>
  )
}

export function ProductCardSkeletonGrid({ count = 12 }: { count?: number }) {
  return (
    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-4">
      {[...Array(count)].map((_, i) => (
        <ProductCardSkeleton key={i} />
      ))}
    </div>
  )
}
