'use client'

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

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} />
      {event.enabled && (
        <>
          <LunchDishes programId={programId} lunchEventId={event.id} />
          <LunchManifest programId={programId} />
          {/* Externals + recap actions mount in Tasks 17-18. */}
        </>
      )}
    </div>
  )
}