import PropTypes from 'prop-types';
import classNames from 'classnames';

function Segment(props) {
  return (
    <div
      id={props.id}
      className={classNames(
        'm-4 p-4 overflow-y-auto',
        'border-2 rounded shadow-sm',
        getBorderClass(props.borderWeight, props.color, props.colorWeight),
        getTextAlignClass(props.textAlign),
        props.className
      )}
    >
      {props.children}
    </div>
  );
}

function getTextAlignClass(textAlign) {
  return `text-${textAlign}`;
}

function getBorderClass(borderWeight, color, colorWeight) {
  const borderClass = borderWeight === 1 ? 'border' : `border-${borderWeight}`;
  const borderColorClass = color ?
    colorWeight ? `border-${color}-${colorWeight}` : `border-${color}-${colorWeight}` :
    'border-gray-300';
  return `${borderClass} ${borderColorClass}`;
}

Segment.defaultProps = {
  textAlign: 'start',
  borderWeight: 1
};

Segment.propTypes = {
  id: PropTypes.string,
  color: PropTypes.string,
  colorWeight: PropTypes.number,
  borderWeight: PropTypes.number.isRequired,
  textAlign: PropTypes.oneOf(['start', 'center', 'end']).isRequired,
  children: PropTypes.oneOfType([
    PropTypes.node,
    PropTypes.arrayOf(PropTypes.node)
  ]),
  className: PropTypes.string
};

export default Segment;
