import cx from "classnames";
import React from "react";

interface ListProps {
  /** Size determines color of list items and color of their borders*/
  color?: "gray";
  /** Spacious lists have horizontal spacing */
  isEnclosed?: boolean;
  /** Size determines vertical spacing */
  size?: "small";
  className?: string;
  children?: React.ReactNode;
}

const CLASS_ROOT = "list";

export const List: React.FC<ListProps> = ({
  color,
  isEnclosed,
  size,
  className,
  children,
  ...other
}) => {
  const classes = cx(
    CLASS_ROOT,
    {
      [`${CLASS_ROOT}--${size}`]: size,
      [`${CLASS_ROOT}--${color}`]: color,
      [`${CLASS_ROOT}--enclosed`]: isEnclosed,
    },
    className,
  );

  return (
    <ul className={classes} {...other}>
      {children}
    </ul>
  );
};