import { useNavigate } from 'react-router-dom'
import { ChevronRight } from 'lucide-react'
import { CAPTURE_HUB_TILES } from '../config/captureNav'

export default function CaptureHub() {
  const nav = useNavigate()
  return (
    <div className="capture-page">
      <h1 className="page-title">Erfassen</h1>
      <div style={{display:'flex',flexDirection:'column',gap:10}}>
        {CAPTURE_HUB_TILES.map(e => (
          <button key={e.to} onClick={()=>nav(e.to)}
            style={{
              display:'flex', alignItems:'center', gap:14,
              padding:'14px 16px', borderRadius:14,
              border: e.highlight ? `2px solid ${e.color}` : '1.5px solid var(--border)',
              background: e.highlight ? e.color+'14' : 'var(--surface)',
              cursor:'pointer', fontFamily:'var(--font)', textAlign:'left',
              transition:'all 0.15s',
            }}>
            <div style={{
              width:44, height:44, borderRadius:12,
              background: e.color+'22',
              display:'flex', alignItems:'center', justifyContent:'center',
              fontSize:22, flexShrink:0,
            }}>
              {e.icon}
            </div>
            <div style={{flex:1}}>
              <div style={{
                fontSize:15, fontWeight:600,
                color: e.highlight ? e.color : 'var(--text1)',
              }}>
                {e.label}
              </div>
              <div style={{fontSize:12, color:'var(--text3)', marginTop:2}}>
                {e.sub}
              </div>
            </div>
            <ChevronRight size={18} style={{color:'var(--text3)',flexShrink:0}}/>
          </button>
        ))}
      </div>
    </div>
  )
}