import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { Markdown } from "@/components/ui/markdown";
import type { PatternVariation } from "@/types";

interface PatternVariationsProps {
  variations: PatternVariation[];
}

export function PatternVariations({ variations }: PatternVariationsProps) {
  if (!variations.length) return null;

  return (
    <Card>
      <CardHeader>
        <CardTitle>Pattern Variations</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          {variations.map((variation) => (
            <div
              key={variation.name}
              className="border-l-2 border-[var(--primary)] pl-4"
            >
              <h4 className="font-semibold mb-1">{variation.name}</h4>
              <Markdown>{variation.description}</Markdown>
              {variation.example && (
                <p className="text-sm text-[var(--muted-foreground)] mt-2">
                  <span className="font-medium">Examples:</span>{" "}
                  {variation.example}
                </p>
              )}
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}