import React from 'react'
import PropTypes from 'prop-types';
import tw, { styled, css } from 'twin.macro'


const StyledLabel = styled.label(({ twColor, twProps, color }) => [
  {
    fontStyle: "normal",
  },
  props =>
  (
    // console.log('props.color', props.color),
    {
      fontFamily: props ? props.font : `"Kanit", sans-serif`,
      fontSize: props ? props.fontSize : 16,
      fontWeight: props ? props.fontWeight : 400,
      color: props ? props.color : '#2A2C2D',
      background: props ? props.bgColor : 'transparent',
      textDecoration: props ? props.textDecoration : 'none',
      textAlign: props ? props.textAlign : 'start',
    }
  ),
  twColor,
  twProps,
])

const Label = ({
  text,
  font,
  fontSize,
  fontWeight,
  color,
  bgColor,
  textDecoration,
  textAlign,
  twColor,
  twProps,
}) => {

  if (text.length <= 0) {
    return null
  }

  return (
    <StyledLabel
      font={font}
      fontSize={fontSize}
      fontWeight={fontWeight}
      color={color}
      bgColor={bgColor}
      textDecoration={textDecoration}
      textAlign={textAlign}
      twColor={twColor}
      twProps={twProps}
    >
      {text}
    </StyledLabel>
  );
};


Label.propTypes = {
  font: PropTypes.string,
  fontSize: PropTypes.number,
  fontWeight: PropTypes.number,
  color: PropTypes.string,
  bgColor: PropTypes.string,
  text: PropTypes.any,
  textDecoration: PropTypes.string,
  textAlign: PropTypes.string,
  twColor: PropTypes.any,
  twProps: PropTypes.any,
};

Label.defaultProps = {
  text: '',
  font: `"Kanit", sans-serif`,
  fontSize: 16,
  fontWeight: 400,
  color: '#2A2C2D',
  bgColor: null,
  textDecoration: 'none',
  textAlign: 'start',
  twColor: null,
  twProps: null,
};


export default Label


