function SkeletonBlock({ rows = 4, label = 'AI กำลังวิเคราะห์ข้อมูล…' }) {
  const ws = [100, 78, 88, 62, 95, 71, 83, 55];
  return (
    <div className="card" style={{ padding: 'var(--pad-card)', display: 'flex', flexDirection: 'column', gap: 14 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, color: 'var(--ink-3)', fontSize: 13, fontWeight: 600 }}>
        <IconRefresh size={16} className="spin" style={{ color: 'var(--accent)' }} /> {label}
      </div>
      {ws.slice(0, rows).map((w, i) => (
        <div key={i} style={{ height: 13, width: `${w}%`, borderRadius: 6, background: 'linear-gradient(90deg, var(--surface-3), var(--surface-2), var(--surface-3))', backgroundSize: '200% 100%', animation: `shimmer 1.4s ${i * 0.08}s infinite` }} />
      ))}
      <style>{`@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}`}</style>
    </div>
  );
}