import DashboardTile from '../DashboardTile'
import SleepWidget from '../SleepWidget'
import RestDaysWidget from '../RestDaysWidget'
import { dashboardTileGridClassName, DASHBOARD_TILE_GRID_COLS } from '../../utils/dashboardLayout'

export default function RecoverySleepRestWidget() {
  return (
    <div className="card section-gap" style={{ marginBottom: 16 }}>
      <div style={{ fontSize: 14, fontWeight: 700, marginBottom: 10, color: 'var(--text1)' }}>Erholung</div>
      <div className={`dashboard-erholung-grid ${dashboardTileGridClassName(DASHBOARD_TILE_GRID_COLS.mobile)}`}>
        <DashboardTile spanMobile={1} spanDesktop={2}>
          <SleepWidget />
        </DashboardTile>
        <DashboardTile spanMobile={1} spanDesktop={2}>
          <RestDaysWidget />
        </DashboardTile>
      </div>
    </div>
  )
}
