import { ListDetailSkeleton } from '@/components/SkeletonLoader'
import { ArrowLeft } from 'lucide-react'
import Link from 'next/link'

export default function Loading() {
  return (
    <main className="container mx-auto px-4 sm:px-6 py-6 sm:py-8 max-w-6xl">
      {/* Header Skeleton */}
      <div className="mb-6 sm:mb-8">
        <Link 
          href="/" 
          className="inline-flex items-center gap-2 text-gray-600 hover:text-gray-900 mb-4 transition-colors tap-target-sm text-sm sm:text-base"
        >
          <ArrowLeft size={20} className="flex-shrink-0" />
          <span>Back to Lists</span>
        </Link>
        
        <div className="flex items-center gap-2 sm:gap-3 mb-2">
          <div className="w-5 h-5 sm:w-6 sm:h-6 rounded-full bg-gray-200 animate-pulse" />
          <div className="h-8 sm:h-10 w-48 bg-gray-200 rounded animate-pulse" />
        </div>
        
        <div className="h-5 w-32 bg-gray-200 rounded animate-pulse" />
      </div>

      {/* Inline Item Creation Skeleton */}
      <div className="mb-6 sm:mb-8">
        <div className="h-14 bg-gray-100 border-2 border-dashed border-gray-300 rounded-lg animate-pulse" />
      </div>

      {/* Items List Skeleton */}
      <ListDetailSkeleton />
    </main>
  )
}