import { cn } from '#/lib/utils.js';

/**
 * The panel a listing sits in: one bordered surface in the reading column,
 * with the rows divided by rules inside it and no rule under the last. A
 * row inside takes its edge from the panel rather than the window, so the
 * rows carry a fixed inset instead of the gutter.
 *
 * The rows are the children's children: a `ul` of `li`, or a `div` of rows.
 * @param {{className?: string, children: import('react').ReactNode}} props
 */
export function ListBox({ className, children }) {
  return (
    <div
      className={cn(
        'mx-(--gutter) my-4 overflow-hidden rounded-lg border border-border bg-card',
        '[&>:is(ul,div)>:last-child]:border-b-0',
        className,
      )}
    >
      {children}
    </div>
  );
}