'use client'

import { trpc } from '@/lib/trpc/client'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { GeographicDistribution } from './geographic-distribution'
import { Globe } from 'lucide-react'
import { Skeleton } from '@/components/ui/skeleton'

type GeographicSummaryCardProps = {
  programId: string
}

export function GeographicSummaryCard({ programId }: GeographicSummaryCardProps) {
  const { data, isLoading } = trpc.analytics.getGeographicDistribution.useQuery(
    { programId },
    { enabled: !!programId }
  )

  if (isLoading) {
    return (
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Globe className="h-5 w-5" />
            Project Origins
          </CardTitle>
          <CardDescription>Geographic distribution of projects</CardDescription>
        </CardHeader>
        <CardContent>
          <Skeleton className="h-[250px] w-full rounded-md" />
        </CardContent>
      </Card>
    )
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Globe className="h-5 w-5" />
          Project Origins
        </CardTitle>
        <CardDescription>Geographic distribution of projects</CardDescription>
      </CardHeader>
      <CardContent>
        <GeographicDistribution data={data || []} compact />
      </CardContent>
    </Card>
  )
}