'use client'

import { use } from 'react'
import { useSession } from 'next-auth/react'
import { useRouter } from 'next/navigation'
import { useEffect } from 'react'
import { ProjectSettings } from '@/components/projects'

export default function ProjectSettingsPage({ params }: { params: Promise<{ id: string }> }) {
    const { id } = use(params)
    const { data: session, status } = useSession()
    const router = useRouter()

    useEffect(() => {
        if (status === 'unauthenticated') {
            router.push('/login')
        }
    }, [status, router])

    if (status === 'loading') {
        return (
            <div className="min-h-screen flex items-center justify-center">
                <div className="animate-spin rounded-full h-12 w-12 border-4 border-primary-600 border-t-transparent" />
            </div>
        )
    }

    if (!session?.user?.id) {
        return null
    }

    return (
        <div className="max-w-6xl mx-auto px-4 py-8">
            <ProjectSettings projectId={id} currentUserId={session.user.id} />
        </div>
    )
}