import React from 'react';
import styled from "styled-components";
import {
  colorTokens,
  getTextSizes,
  textLevels,
} from "../../../design-system/tokens";
import { TextTag } from "./Text";
import { TextProps } from "./types";

const Text = styled((props: TextProps) => <TextTag {...props} />)`
  color: ${({ color }) => colorTokens[color || "text-default-color"]};
  ${({ type }) => getTextSizes(textLevels[type || "P"])};
  margin-bottom: 0;
`;

export { Text };