'use client'

import { trpc } from '@/lib/trpc/client'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Skeleton } from '@/components/ui/skeleton'

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" />
  }
  if (!event.enabled) {
    return (
      <Card>
        <CardHeader>
          <CardTitle>Lunch is disabled</CardTitle>
        </CardHeader>
        <CardContent>
          <p className="text-muted-foreground text-sm">
            Toggle Lunch on from the Event configuration card to begin setup.
          </p>
          {/* Event config card mounts in Task 14, replacing this stub. */}
        </CardContent>
      </Card>
    )
  }
  return (
    <div className="space-y-6">
      {/* Cards mount in Tasks 14-18. */}
      <p className="text-muted-foreground text-sm">
        Lunch tab — cards land in upcoming tasks.
      </p>
    </div>
  )
}