'use client'

import { trpc } from '@/lib/trpc/client'
import { Card, CardContent } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { UsersRound } from 'lucide-react'

export function ExternalAttendeesStrip({ projectId }: { projectId: string }) {
  const { data } = trpc.lunch.getProjectExternals.useQuery({ projectId })
  if (!data || data.length === 0) return null
  return (
    <Card>
      <CardContent className="flex flex-wrap items-center gap-2 py-3">
        <UsersRound className="text-muted-foreground h-4 w-4" />
        <span className="text-sm font-medium">External attendees joining your team:</span>
        {data.map((e) => (
          <Badge key={e.id} variant="outline">
            {e.name}
            {e.roleNote ? ` (${e.roleNote})` : ''}
          </Badge>
        ))}
      </CardContent>
    </Card>
  )
}