import React from 'react'
import { Link, useParams } from 'react-router-dom'
import ProgressionGraphEditor from '../components/ProgressionGraphEditor'

export default function ProgressionGraphEditPage() {
  const { id } = useParams()
  const graphId = Number(id)

  if (!Number.isFinite(graphId) || graphId < 1) {
    return (
      <div className="page" style={{ padding: '16px' }}>
        <p className="form-error">Ungültige Graph-ID.</p>
        <Link to="/exercises" className="btn btn-secondary">
          Zurück
        </Link>
      </div>
    )
  }

  return (
    <div className="page" style={{ padding: '16px', paddingBottom: '80px' }}>
      <ProgressionGraphEditor graphId={graphId} />
    </div>
  )
}