interface SkeletonProps {
  width?: string
  height?: string
  radius?: string
  className?: string
}

export default function Skeleton({
  width = '100%',
  height = '1rem',
  radius = '8px',
  className = '',
}: SkeletonProps) {
  return (
    <span
      className={`skeleton ${className}`}
      style={{ width, height, borderRadius: radius, display: 'block' }}
      aria-hidden="true"
    />
  )
}

export function ProductCardSkeleton() {
  return (
    <div className="card product-card product-card-skeleton">
      <Skeleton height="auto" radius="10px" className="skeleton-square" />
      <div className="product-card-body">
        <Skeleton height="0.85rem" width="90%" />
        <Skeleton height="0.85rem" width="60%" />
        <Skeleton height="1.1rem" width="40%" />
      </div>
    </div>
  )
}

export function SkeletonGrid({ count = 10 }: { count?: number }) {
  return (
    <div className="product-grid">
      {Array.from({ length: count }, (_, i) => (
        <ProductCardSkeleton key={i} />
      ))}
    </div>
  )
}

export function SkeletonRow({ count = 6 }: { count?: number }) {
  return (
    <div className="rail-track">
      {Array.from({ length: count }, (_, i) => (
        <div className="rail-item" key={i}>
          <ProductCardSkeleton />
        </div>
      ))}
    </div>
  )
}