import cx from 'classnames';
import React from 'react';

import css from './list.module.css';

// -- TYPES

export interface IListProps extends React.HTMLAttributes<HTMLUListElement> {}

export interface IItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
  children: React.ReactNode;
}

// -- COMPONENTS

function Item({ className, children, ...domAttrs }: IItemProps) {
  const cn = cx(className, css.item);

  return (
    <li className={cn} {...domAttrs}>
      {children}
    </li>
  );
}

// -- MAIN

function List({ className, children, ...domAttrs }: IListProps) {
  const cn = cx(className, css.list);

  return (
    <ul className={cn} {...domAttrs}>
      {children}
    </ul>
  );
}

List.Item = Item;

export default List;