import { clsx } from 'clsx';
import React from 'react';

export interface ListProps {
  /** @default 'ul' */
  as?: 'ul' | 'ol' | 'div';
  className?: string;
  children?: React.ReactNode;
  style?: React.CSSProperties;
  id?: string;
  [key: `data-${string}`]: string | number | boolean | undefined;
}

export default function List({ as: Element = 'ul', className, ...props }: ListProps) {
  return <Element className={clsx('wds-list', 'list-unstyled', 'm-y-0', className)} {...props} />;
}