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

function Segment(props) {
  return (
    <div
      id={props.id}
      className={classNames(
        'm-4 overflow-y-auto p-4',
        'rounded border-2 shadow-sm',
        getBorderClass(props.borderWeight, props.color, props.colorWeight),
        getBackgroundClass(props.backgroundColor, props.backgroundColorWeight),
        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 ? `border-${color}-${colorWeight}` : 'border-gray-300';
  return `${borderClass} ${borderColorClass}`;
}

function getBackgroundClass(color, colorWeight) {
  return color ? `bg-${color}-${colorWeight}` : '';
}

Segment.defaultProps = {
  textAlign: 'start',
  borderWeight: 1,
  color: 'gray',
  colorWeight: 300,
  backgroundColorWeight: 50
};

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

export default Segment;
