import { useNavigate } from 'react-router-dom'
import QuickWeightEntry from '../QuickWeightEntry'

export default function QuickWeightTodayWidget({ onSaved }) {
  const nav = useNavigate()
  return (
    <div className="card section-gap" style={{ marginBottom: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, marginBottom: 10 }}>
        <div>
          <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--text1)' }}>Gewicht heute</div>
          <div style={{ fontSize: 12, color: 'var(--text3)' }}>Tageswert erfassen</div>
        </div>
        <button type="button" className="btn btn-secondary" style={{ fontSize: 12, padding: '6px 12px' }} onClick={() => nav('/weight')}>
          Alle Einträge →
        </button>
      </div>
      <QuickWeightEntry onSaved={onSaved} />
    </div>
  )
}