import styled from "styled-components";
import { TextProps } from "./interfaces";

const setSize = (size: string) => {
  switch (size) {
    case "small":
      return "18px";
    case "medium":
      return "24px";
    case "large":
      return "30px"
    default:
      return "24px";
  }
} 

const setColor = (size: string) => {
  switch (size) {
    case "default":
      return "#000";
    case "secondary":
      return "#666";
    case "success":
      return "#6BC235"
    case "warning":
      return "#FF7F11"
    case "danger":
      return "#D63643"
    case "info":
      return "#43BBF2"
    default:
      return "#000";
  }
} 

export const Container = styled.h1<TextProps>`
  margin: 0;
  padding: 0;
  color: ${props => setColor(props.type)};
  font-size: ${props => setSize(props.size)};
`