import React from 'react';
import styled from 'styled-components';
import { FormLabel, Typography } from '../..';
import NormalizedElements from '../../common/NormalizedElements';
var StyledLegendAsCaption = styled(NormalizedElements.Legend).withConfig({
  displayName: "Legend__StyledLegendAsCaption",
  componentId: "sc-x6z4g1-0"
})(["margin:0 0 ", "px 0;"], function (p) {
  return p.theme.spacing.unit(4);
});
var StyledLegendAsLabel = styled(NormalizedElements.Legend).withConfig({
  displayName: "Legend__StyledLegendAsLabel",
  componentId: "sc-x6z4g1-1"
})(["cursor:auto;"]);
export var Legend = function Legend(props) {
  var className = props.className,
    children = props.children,
    _props$styleType = props.styleType,
    styleType = _props$styleType === void 0 ? 'caption' : _props$styleType;
  if (styleType === 'caption') {
    return React.createElement(StyledLegendAsCaption, {
      className: className
    }, React.createElement(Typography, {
      type: "title3",
      weight: "bold"
    }, children));
  }
  return React.createElement(FormLabel, {
    className: className,
    as: StyledLegendAsLabel
  }, children);
};