import React from "react";
import styled from "styled-components";

const StyledText = styled.div`
  font-family: "GilroyR";

  ${({ variant }) => {
    switch (variant) {
      case "text":
        return `
          font-size: 16px;
        `;
      case "h1":
        return `
          font-size: 32px;
          font-weight: bold;
        `;
      case "h2":
        return `
          font-size: 24px;
          font-weight: bold;
        `;
      case "h3":
        return `
          font-size: 18.72px;
          font-weight: bold;
        `;
      case "h4":
        return `
          font-size: 16px;
          font-weight: bold;
        `;
      case "h5":
        return `
          font-size: 13.28px;
          font-weight: bold;
        `;
      case "h6":
        return `
          font-size: 10.72px;
          font-weight: bold;
        `;
      default:
        return `
          font-size: 16px;
        `;
    }
  }}
`;

const Text = (props) => {
  const { children, variant = "p", ...rest } = props;

  return (
    <StyledText variant={variant} {...rest}>
      {children}
    </StyledText>
  );
};

export default Text;