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

/**
 * Erholung R1–R5 (wie Verlauf Erholung).
 * @param {{ refreshTick?: number, chartDays?: number }} props
 */
export default function RecoveryChartsPanelWidget({ refreshTick = 0, chartDays }) {
  const nav = useNavigate()
  const days = chartDays != null ? normalizeBodyChartDays(chartDays) : 28

  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)' }}>Erholung — Charts</div>
          <div style={{ fontSize: 12, color: 'var(--text3)' }}>Schlaf, Recovery, Vitalwerte · {days} Tage</div>
        </div>
        <button
          type="button"
          className="btn btn-secondary"
          style={{ fontSize: 12, padding: '6px 12px' }}
          onClick={() => nav('/history', { state: { tab: 'recovery' } })}
        >
          Verlauf →
        </button>
      </div>
      <RecoveryCharts key={`${refreshTick}-${days}`} days={days} />
    </div>
  )
}