import React, { FC } from 'react';
import { getSystemStyle, SystemProps } from '../utils/systemProps';
import clsx from 'clsx';

interface ListProps extends SystemProps {
  style?: React.CSSProperties;
  variant : 'ordered' | 'unordered';
  children?: React.ReactNode;
  className?: string;
};

const List : FC<ListProps> = ({ style, className, variant, children, ...props }) => {

  const systemStyle = getSystemStyle(props, style);

  const Tag = {
    'ordered': 'ol',
    'unordered': 'ul'
  }[variant] as keyof React.ReactHTML;

  const styleClass = 'md-' + Tag;

  return (
    <Tag
      className={clsx(styleClass, 'md-list', className)}
      children={children}
      style={systemStyle}
    />
  );
};

interface ListItemProps extends SystemProps {
  style?: React.CSSProperties;
  children?: React.ReactNode;
  className?: string;
};

const ListItem : FC<ListItemProps> = ({ style, className, children, ...props }) => {
  const systemStyle = getSystemStyle(props, style);

  return (
    <li
      className={clsx('md-li', className)}
      style={systemStyle}
    >{children}</li>
  );
}

export {
  List,
  ListItem
};