'use client'

import CarplaceFooter from '@/components/carplace/CarplaceFooter'
import CarplaceHeader from '@/components/carplace/CarplaceHeader'
import { useCarplacePreferences } from '@/components/CarplaceShell'
import { resolveBrowserAppUrl } from '@/lib/appUrls'

const skipLabels = { en: 'Skip to content', fr: 'Aller au contenu', ar: 'الانتقال إلى المحتوى' } as const

export default function PublicLayout({ children }: { children: React.ReactNode }) {
  const { language } = useCarplacePreferences()
  const dashboardUrl = resolveBrowserAppUrl(process.env.NEXT_PUBLIC_DASHBOARD_URL ?? 'http://localhost:3000/dashboard')

  return (
    <div className="site-page flex min-h-screen flex-col">
      <a href="#main-content" className="skip-link">{skipLabels[language]}</a>
      <CarplaceHeader dashboardUrl={dashboardUrl} />
      <div className="flex flex-1 flex-col">
        <div className="flex-1">{children}</div>
        <CarplaceFooter dashboardUrl={dashboardUrl} />
      </div>
    </div>
  )
}