"use client";

import {ComponentItem} from "@/components/component-item";
import {getRelatedComponents} from "@/components-registry";
import {cn} from "@/utils/cn";

interface RelatedComponentsProps {
  component: string;
  className?: string;
}

export function RelatedComponents({className, component}: RelatedComponentsProps) {
  const relatedComponents = getRelatedComponents(component)?.slice(0, 3);

  if (!relatedComponents || relatedComponents.length === 0) {
    return null;
  }

  return (
    <div
      className={cn(
        "not-prose grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2 lg:grid-cols-3",
        className,
      )}
    >
      {relatedComponents.map((relatedComponent) => (
        <ComponentItem key={relatedComponent.name} component={relatedComponent} />
      ))}
    </div>
  );
}
