'use client'

import { trpc } from '@/lib/trpc/client'
import { Skeleton } from '@/components/ui/skeleton'
import { StatusBreakdownChart } from '@/components/charts'
import { RoundTypeStatsCards } from '@/components/observer/round-type-stats'

interface MentoringReportTabsProps {
  roundId: string
  programId: string
}

function StatusBreakdownSection({ roundId }: { roundId: string }) {
  const { data: statusBreakdown, isLoading } =
    trpc.analytics.getStatusBreakdown.useQuery({ roundId })

  if (isLoading) return <Skeleton className="h-[350px]" />
  if (!statusBreakdown) return null
  return <StatusBreakdownChart data={statusBreakdown} />
}

export function MentoringReportTabs({ roundId }: MentoringReportTabsProps) {
  return (
    <div className="space-y-6">
      <RoundTypeStatsCards roundId={roundId} />
      <StatusBreakdownSection roundId={roundId} />
    </div>
  )
}