import * as React from 'react'
import { cn } from '../../lib/utils'

export interface DashboardSkeletonProps {
  cards?: number
  className?: string
}

export function DashboardSkeleton({
  cards = 4,
  className,
}: DashboardSkeletonProps) {
  return (
    <div className={cn('grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4', className)}>
      {Array.from({ length: cards }).map((_, i) => (
        <div key={i} className="rounded-lg border bg-background p-6">
          <div className="flex items-center justify-between mb-4">
            <div className="h-4 w-24 animate-pulse rounded-md bg-gray-200" />
            <div className="h-8 w-8 animate-pulse rounded-md bg-gray-200" />
          </div>
          <div className="h-8 w-20 animate-pulse rounded-md bg-gray-200 mb-2" />
          <div className="h-3 w-32 animate-pulse rounded-md bg-gray-200" />
        </div>
      ))}
    </div>
  )
}