import type { ReactNode } from 'react'
import { useScale } from '../hooks/useScale'
import Header from '../components/layout/Header'
import ActivityBar from '../components/ui/ActivityBar'

interface MainLayoutProps {
  children: ReactNode
  /** Props para el ActivityBar. Si no se pasa, la pantalla hija debe renderizar su propio ActivityBar. */
  barProps?: {
    preguntaActual?: number
    totalPreguntas?: number
    mensaje: string
    puedeAnterior?: boolean
    puedeSiguiente?: boolean
    onPrev?: () => void
    onNext?: () => void
  }
}

export default function MainLayout({ children, barProps }: MainLayoutProps) {
  const scaleRef = useScale()

  return (
    <div className="w-screen h-screen overflow-hidden bg-white relative">
      <div ref={scaleRef} className="bg-gray-100 flex flex-col">
        <Header />
        <main className="flex-1 flex flex-col items-center justify-center px-0 pt-8 overflow-hidden" style={{ minHeight: 0 }}>
          {children}
        </main>
        {barProps && (
          <ActivityBar
            preguntaActual={barProps.preguntaActual ?? 0}
            totalPreguntas={barProps.totalPreguntas ?? 0}
            mensaje={barProps.mensaje}
            puedeAnterior={barProps.puedeAnterior ?? false}
            puedeSiguiente={barProps.puedeSiguiente ?? false}
            onPrev={barProps.onPrev}
            onNext={barProps.onNext}
          />
        )}
      </div>
    </div>
  )
}
