import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { CREW_LOOKING_FOR_LABELS } from '@/lib/types';
import { CREW_LOOKING_FOR_KEYS } from '@/lib/labelKeys';
import { useTranslation } from '@/contexts/language';
import { Megaphone } from 'lucide-react';

/**
 * Display a crew's open calls ("looking for a filmer / editor / new members").
 * This is the crew ↔ Lab hiring pipeline: crews broadcast what they need, and
 * matching Lab providers can reach out. Slugs map to Lab scenes.
 */
export function CrewLookingForCard({ lookingFor }: { lookingFor: string[] }) {
  const { t } = useTranslation();
  if (!lookingFor || lookingFor.length === 0) return null;

  return (
    <Card className="border-2 border-fuchsia-500/30 bg-black/90">
      <CardHeader className="pb-3">
        <CardTitle className="flex items-center gap-2 text-lg font-black uppercase text-white">
          <Megaphone className="h-5 w-5 text-fuchsia-400" /> {t('socialUi.lookingFor.title')}
        </CardTitle>
        <p className="text-xs text-gray-400">{t('socialUi.lookingFor.subtitle')}</p>
      </CardHeader>
      <CardContent>
        <div className="flex flex-wrap gap-2">
          {lookingFor.map((slug) => {
            const meta = CREW_LOOKING_FOR_LABELS[slug];
            return (
              <span
                key={slug}
                className="inline-flex items-center gap-1.5 rounded-xl border border-fuchsia-500/40 bg-fuchsia-500/10 px-3 py-1.5 text-sm font-bold text-fuchsia-200"
              >
                <span>{meta?.emoji ?? '🛹'}</span>
                {CREW_LOOKING_FOR_KEYS[slug] ? t(CREW_LOOKING_FOR_KEYS[slug]) : (meta?.label ?? slug)}
              </span>
            );
          })}
        </div>
      </CardContent>
    </Card>
  );
}