'use client'

import { useEffect, useState } from 'react'
import { MobileLayout } from './MobileLayout'
import { DesktopLayout } from './DesktopLayout'

interface ResponsiveLayoutProps {
  children: React.ReactNode
  role?: 'creator' | 'agency' | 'brand'
  showBottomNav?: boolean
}

export function ResponsiveLayout({
  children,
  role = 'creator',
  showBottomNav = true,
}: ResponsiveLayoutProps) {
  const [isMobile, setIsMobile] = useState(true)

  useEffect(() => {
    const checkMobile = () => {
      setIsMobile(window.innerWidth < 1024)
    }

    checkMobile()
    window.addEventListener('resize', checkMobile)
    return () => window.removeEventListener('resize', checkMobile)
  }, [])

  if (isMobile) {
    return (
      <MobileLayout role={role} showBottomNav={showBottomNav}>
        {children}
      </MobileLayout>
    )
  }

  return (
    <DesktopLayout role={role}>
      {children}
    </DesktopLayout>
  )
}

export default ResponsiveLayout