'use client'

import { useEffect, useState } from 'react'
import ListDetailView from './ListDetailView'

interface ClientOnlyListDetailViewProps {
  listId: string
  initialItems: any[]
  permission?: 'owner' | 'editor' | 'viewer'
  canShare?: boolean
  listTitle?: string
  ownerId?: string
  ownerName?: string | null
  ownerEmail?: string
  collaborators?: any[]
}

export default function ClientOnlyListDetailView(props: ClientOnlyListDetailViewProps) {
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    setMounted(true)
  }, [])

  if (!mounted) {
    return (
      <div className="animate-pulse space-y-4">
        <div className="h-8 bg-gray-200 rounded w-1/4"></div>
        <div className="h-10 bg-gray-200 rounded"></div>
        <div className="space-y-2">
          <div className="h-16 bg-gray-200 rounded"></div>
          <div className="h-16 bg-gray-200 rounded"></div>
          <div className="h-16 bg-gray-200 rounded"></div>
        </div>
      </div>
    )
  }

  return <ListDetailView {...props} />
}