import React from "react"
import BackgroundLeft from "./assets/BackgroundLeft"
import BackgroundRight from "./assets/BackgroundRight"

interface OnboardingWrapperProps {
  children: React.ReactNode
  progress: number // 0 to 100
}

export default function OnboardingWrapper({ children, progress }: OnboardingWrapperProps) {
  return (
    <div className="z-0 flex w-full h-full min-h-screen" style={{ minHeight: "100vh" }}>
      <div className="relative flex h-full min-h-screen w-full flex-shrink-0 flex-col items-center gap-y-10 overflow-clip bg-neutral-950 px-8 pb-8 pt-14 font-inter">
        <BackgroundLeft className="absolute left-0 top-0 z-0 h-[489px] w-[677px] flex-shrink-0" />
        <BackgroundRight className="absolute bottom-0 right-0 h-[507px] w-[763px] flex-shrink-0" />
        <div
          id="progressline"
          className="relative z-[2] flex items-center self-stretch pb-px w-full"
        >
          <div className="h-0.5 w-full bg-stone-700">
            <div
              className="h-full bg-yellow-400 transition-all duration-300 ease-in-out"
              style={{ width: `${progress}%` }}
            />
          </div>
        </div>
        {children}
      </div>
    </div>
  )
}
