export default function SkeletonTable({ rows = 8, columns = 5, showChart = false }) {
  return (
    <div className="space-y-4">
      {showChart && (
        <div className="overflow-hidden rounded-lg border border-slate-200 bg-white p-5 shadow-[0_1px_0_rgba(15,23,42,0.04)]">
          <div className="mb-3 h-4 w-40 rounded bg-slate-200 animate-pulse" />
          <div className="h-52 rounded bg-slate-100 animate-pulse" />
        </div>
      )}
      <div className="overflow-hidden rounded-lg border border-slate-200 bg-white shadow-[0_1px_0_rgba(15,23,42,0.04)]">
        <div className="border-b border-slate-100 px-5 py-3">
          <div className="h-4 w-32 rounded bg-slate-200 animate-pulse" />
        </div>
        <div className="divide-y divide-slate-100">
          {Array.from({ length: rows }).map((_, i) => (
            <div key={i} className="flex items-center gap-4 px-5 py-3">
              {Array.from({ length: columns }).map((_, j) => (
                <div
                  key={j}
                  className="h-3 rounded bg-slate-100 animate-pulse"
                  style={{ width: `${60 + ((i * 7 + j * 13) % 40)}px`, animationDelay: `${(i + j) * 50}ms` }}
                />
              ))}
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}
