'use client'

import { useTheme } from '@/lib/ThemeContext'
import type { B2BHit } from '@/lib/AlertsB2BContext'
import { HitCard } from './HitCard'

export function DigestView({
  hits,
  onHitClick
}: {
  hits: B2BHit[]
  onHitClick: (hit: B2BHit) => void
}) {
  const { isDark } = useTheme()

  return (
    <div className="space-y-4">
      <div className="flex items-center gap-2 mb-4">
        <span className="text-2xl">📬</span>
        <h3 className={`font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>
          Tages-Digest (Top 10)
        </h3>
      </div>
      {hits.length === 0 ? (
        <div className={`text-center py-8 ${isDark ? 'text-white/40' : 'text-slate-400'}`}>
          <span className="text-4xl block mb-2">🎉</span>
          <p>Keine relevanten Hits heute</p>
        </div>
      ) : (
        <div className="space-y-3">
          {hits.map((hit, idx) => (
            <div key={hit.id} className="flex items-start gap-3">
              <span className={`w-6 h-6 rounded-full flex items-center justify-center text-xs font-medium ${
                idx < 3
                  ? 'bg-amber-500/20 text-amber-400'
                  : isDark ? 'bg-white/10 text-white/60' : 'bg-slate-100 text-slate-500'
              }`}>
                {idx + 1}
              </span>
              <div className="flex-1">
                <HitCard hit={hit} onClick={() => onHitClick(hit)} />
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  )
}