import { cn } from "~/utils/cn";

type Size = "xl" | "lg" | "md";

const SIZES: Record<Size, string> = {
  xl: "text-2xl",
  lg: "text-xl",
  md: "text-lg",
};

type Props = {
  level?: 1 | 2 | 3;
  size?: Size;
  className?: string;
  children: React.ReactNode;
};

export function Heading({ level = 1, size = "lg", className, children }: Props) {
  const Tag = `h${level}` as const;
  return <Tag className={cn("font-semibold text-kumo-strong", SIZES[size], className)}>{children}</Tag>;
}

/** Sidebar / metadata section: small-caps title with a divider underneath. */
export function SidebarSection({
  title,
  action,
  className,
  children,
}: {
  title: React.ReactNode;
  action?: React.ReactNode;
  className?: string;
  children: React.ReactNode;
}) {
  return (
    <section className={cn("space-y-2 border-b border-kumo-hairline pb-4", className)}>
      <div className="flex items-center justify-between">
        <h3 className="label-small text-kumo-subtle">{title}</h3>
        {action}
      </div>
      {children}
    </section>
  );
}