'use client'

/**
 * PulseSkeleton — 脈動骨架屏 (取代「載入中...」文字)
 * Sprint 5R G1: Gemini 建議 — AI 呼吸感知
 * @created 2026-04-09 Claude Opus 4.6 Asia/Taipei
 */

export function PulseSkeleton({ width = '100%', height = 16, borderRadius = 4, count = 1 }: {
  width?: string | number
  height?: number
  borderRadius?: number
  count?: number
}) {
  return (
    <>
      <style>{`
        @keyframes pulse-skeleton {
          0%, 100% { opacity: 0.4; }
          50% { opacity: 1; }
        }
      `}</style>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {Array.from({ length: count }).map((_, i) => (
          <div key={i} style={{
            width, height, borderRadius,
            background: '#e8e5dc',
            animation: 'pulse-skeleton 1.5s ease-in-out infinite',
            animationDelay: `${i * 0.15}s`,
          }} />
        ))}
      </div>
    </>
  )
}

/** 卡片級骨架屏 — 模擬 .card 結構 */
export function CardSkeleton({ lines = 3 }: { lines?: number }) {
  return (
    <div style={{
      background: '#fff', border: '0.5px solid #e0ddd4', borderRadius: 10,
      overflow: 'hidden', padding: 14,
    }}>
      <PulseSkeleton width="40%" height={14} borderRadius={4} />
      <div style={{ marginTop: 12 }}>
        <PulseSkeleton count={lines} height={12} borderRadius={3} />
      </div>
    </div>
  )
}
