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

/**
 * Erholung Layer 2b (ein Bundle-Request). Link zum Verlauf unter Fitness.
 * @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 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 — Übersicht</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: 'activity' } })}
        >
          Verlauf →
        </button>
      </div>
      <RecoveryDashboardOverview key={`${refreshTick}-${days}`} externalPeriod={days} hidePeriodSelector />
    </div>
  )
}