import React from 'react'
import { createRoot } from 'react-dom/client'
import './styles/App.css'
import WorkoutPage from './pages/WorkoutPage'

const App = () => {
  // Minimal placeholder data to mount the page standalone
  const day = {
    name: 'Push A',
    day_number: 1,
    exercises: [
      { id: 1, name: 'Bench Press', muscle_group: 'Bröst', sets: 3, reps_min: 8, reps_max: 12 },
      { id: 2, name: 'Overhead Press', muscle_group: 'Axlar', sets: 3, reps_min: 8, reps_max: 12 }
    ]
  }
  const week = 1
  const logs = {}
  const onBack = () => { console.log('Back') }
  const fetchProgression = async (id) => ({ suggestedWeight: 20 })
  const onLogSet = () => {}
  const onDeleteSet = () => {}
  return (
    <div className="app">
      <WorkoutPage day={day} week={week} logs={logs} onBack={onBack} fetchProgression={fetchProgression} onLogSet={onLogSet} onDeleteSet={onDeleteSet} />
    </div>
  )
}

const root = createRoot(document.getElementById('root'))
root.render(<App />)