import Link from "next/link";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import type { RelatedPattern } from "@/types";

interface RelatedPatternsProps {
  title: string;
  description?: string;
  patterns: RelatedPattern[];
}

export function RelatedPatterns({
  title,
  description,
  patterns,
}: RelatedPatternsProps) {
  if (!patterns.length) return null;

  return (
    <Card>
      <CardHeader>
        <CardTitle>{title}</CardTitle>
      </CardHeader>
      <CardContent>
        {description && (
          <p className="text-sm text-[var(--muted-foreground)] mb-4">
            {description}
          </p>
        )}
        <div className="space-y-3">
          {patterns.map((pattern) => (
            <Link
              key={pattern.slug}
              href={`/patterns/${pattern.slug}`}
              className="block p-3 rounded-lg border border-[var(--border)] bg-[var(--card)] hover:border-[var(--primary)] transition-colors"
            >
              <h4 className="font-semibold mb-1">{pattern.name}</h4>
              {pattern.description && (
                <p className="text-sm text-[var(--muted-foreground)] line-clamp-2">
                  {pattern.description}
                </p>
              )}
            </Link>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}
