"use client";

import { Badge } from "@/components/ui/badge";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";

interface RecognitionSignalsProps {
  signals: string[];
}

export function RecognitionSignals({ signals }: RecognitionSignalsProps) {
  if (!signals.length) return null;

  return (
    <Card>
      <CardHeader>
        <CardTitle>Recognition Signals</CardTitle>
      </CardHeader>
      <CardContent>
        <p className="text-sm text-[var(--muted-foreground)] mb-4">
          Look for these keywords and patterns in problem descriptions:
        </p>
        <div className="flex flex-wrap gap-2">
          {signals.map((signal) => (
            <Badge key={signal} variant="pattern">
              {signal}
            </Badge>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}