import React from "react";
import SmallText from "../SmallText/SmallText";
import styled from "styled-components";

const StyledLabel = styled.label`
  font-family: "GilroyB";
  font-size: 14px;
  color: #2f4644;
  display: inline-block;
  padding-bottom: 8px;
  font-weight: ${(props) => (props.bold ? props.bold : "600")};
`;

const Label = (props) => {
  const { children, label: labelText, required, ...rest } = props;

  return (
    <StyledLabel {...rest}>
      {labelText || children}
      {(labelText || children) && required && <SmallText style={{ fontSize: "initial", marginLeft: 4 }}>*</SmallText>}
    </StyledLabel>
  );
};

export default Label;