import { twMerge } from 'tailwind-merge';

import ListItem, { Props as ListItemProps } from './ListItem';

export type Props = Omit<ListItemProps, 'wrapChildren'>;

const ListHeading: React.FC<Props> = (props) => {
  const { children, className, ...restProps } = props;

  return (
    <ListItem
      className={twMerge(
        'border-b-0 pt-2 pb-1',
        'font-sans text-base font-medium',
        'text-foreground-primary',
        className
      )}
      {...restProps}
    >
      {children}
    </ListItem>
  );
};

export default ListHeading;