import { cn } from "@repo/shadcn-ui/lib/utils";
import type { ReactNode } from "react";

interface UiKitSectionProps {
  id: string;
  title: string;
  description?: ReactNode;
  children: ReactNode;
  className?: string;
}

export const UiKitSection = ({
  id,
  title,
  description,
  children,
  className,
}: UiKitSectionProps) => {
  return (
    <section className={cn("space-y-4", className)} id={id}>
      <div className="space-y-1">
        <h2 className="text-lg font-semibold tracking-tight text-foreground">{title}</h2>
        {description ? <p className="text-sm text-muted-foreground">{description}</p> : null}
      </div>
      {children}
    </section>
  );
};