'use client'

import { trpc } from '@/lib/trpc/client'
import { Skeleton } from '@/components/ui/skeleton'
import { LunchEventConfig } from './lunch-event-config'

export function LunchTab({ programId }: { programId: string }) {
  const { data: event, isLoading } = trpc.lunch.getEvent.useQuery({ programId })
  if (isLoading || !event) {
    return <Skeleton className="h-48 w-full" />
  }
  return (
    <div className="space-y-6">
      <LunchEventConfig programId={programId} event={event} />
      {/* Other cards mount in Tasks 15-18 once event.enabled. */}
    </div>
  )
}