import React from 'react';
import styled from 'styled-components';
import { Typography } from '../../../../index';
import { useFlexTable } from '../FlexTableProvider';
import getStylesForSizes from '../getStylesForSizes';
var getFontSizeStyles = function getFontSizeStyles(_ref) {
  var fontSize = _ref.fontSize,
    theme = _ref.theme;
  if (fontSize === 's') {
    return "\n      font-size: 12px;\n      line-height: ".concat(theme.spacing.unit(4), "px;\n    ");
  }
  return "\n    font-size: 14px;\n    line-height: ".concat(theme.spacing.unit(5), "px;\n  ");
};
var StyledTypography = styled(Typography).withConfig({
  displayName: "Text__StyledTypography",
  componentId: "sc-1thuey1-0"
})(["", ""], getStylesForSizes(function (p) {
  return {
    xs: p.$xs,
    sm: p.$sm,
    md: p.$md,
    lg: p.$lg,
    xl: p.$xl
  };
}, {
  fontSize: getFontSizeStyles
}));
var Text = function Text(_ref2) {
  var className = _ref2.className,
    color = _ref2.color,
    weight = _ref2.weight,
    children = _ref2.children;
  var _useFlexTable = useFlexTable('fontSize'),
    xs = _useFlexTable.xs,
    sm = _useFlexTable.sm,
    md = _useFlexTable.md,
    lg = _useFlexTable.lg,
    xl = _useFlexTable.xl;
  return React.createElement(StyledTypography, {
    className: className,
    color: color,
    weight: weight,
    $xs: xs,
    $sm: sm,
    $md: md,
    $lg: lg,
    $xl: xl
  }, children);
};
export default Text;