import { useNavigate } from 'react-router-dom'
import NutritionCharts from '../NutritionCharts'
import { normalizeBodyChartDays } from '../../widgetSystem/bodyChartDays'

/**
 * Phase-0c-Ernährungscharts (wie „Detaillierte Charts“ im Verlauf).
 * @param {{ refreshTick?: number, chartDays?: number }} props
 */
export default function NutritionDetailChartsWidget({ refreshTick = 0, chartDays }) {
  const nav = useNavigate()
  const days = chartDays != null ? normalizeBodyChartDays(chartDays) : 30

  return (
    <div className="card section-gap" style={{ marginBottom: 16 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
        <div>
          <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--text1)' }}>Ernährung — Charts</div>
          <div style={{ fontSize: 12, color: 'var(--text3)' }}>API-Charts · {days} Tage</div>
        </div>
        <button
          type="button"
          className="btn btn-secondary"
          style={{ fontSize: 12, padding: '6px 12px' }}
          onClick={() => nav('/history', { state: { tab: 'nutrition' } })}
        >
          Verlauf →
        </button>
      </div>
      <NutritionCharts key={`${refreshTick}-${days}`} days={days} />
    </div>
  )
}
