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

const setSize = (size: string) => {
  switch (size) {
    case "small":
      return "12px";
    case "medium":
      return "14px";
    case "large":
      return "16px"
    default:
      return "14px";
  }
} 

const setColor = (size: string) => {
  switch (size) {
    case "default":
      return "var(--primary-project, var(--secondary, pink));";
    case "secondary":
      return "#808495";
    case "success":
      return "#6BC235"
    case "warning":
      return "#FF7F11"
    case "danger":
      return "#D63643"
    case "info":
      return "#43BBF2"
    default:
      return "#666";
  }
} 

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