import React from 'react';
import colors from '../../theme/colors';
import InfoTip from '../InfoTip';
import Typography from '../Typography';
import { Label, LabelWrapper } from './styles';

type InputFieldLabelProps = {
  label: string;
  name?: string;
  errorState?: boolean;
  required?: boolean;
  infoTip?: string;
};

const InputFieldLabel = ({
  label,
  name,
  errorState,
  infoTip,
  required,
}: InputFieldLabelProps) => {
  return (
    <Label>
      <LabelWrapper>
        <Typography
          variant={'utility3'}
          as="label"
          htmlFor={name}
          color={errorState ? colors.error[700] : colors.neutral[700]}
          margin={[0, 4, 0, 0]}
        >
          {label}
        </Typography>
        {infoTip && <InfoTip content={infoTip} />}
      </LabelWrapper>
      {required && (
        <Typography
          variant={'utility5'}
          color={errorState ? colors.error[700] : colors.neutral[700]}
        >
          Required
        </Typography>
      )}
    </Label>
  );
};

export default InputFieldLabel;