import styled from "styled-components/native";
import { colors } from "data/dataMx";
import { CSSObject } from "styled-components";

interface IStylesProps {
  progress?: string;
  align?: string;
  background?: colors;
  style: CSSObject;
  type: "desktop" | "mobile";
}

export const Tier = styled.TouchableOpacity`
  background-color: white;
  border-radius: 8px;
  padding: 16px 0px;
  width: 100%;
`;

export const TierPointsContainer = styled.View`
  display: flex;
  flex-direction: ${({ type }: IStylesProps) =>
    type === "desktop" ? "row" : "column"};
  align-items: ${({ type }: IStylesProps) =>
    type === "desktop" ? "center" : "baseline"};
  justify-content: space-between;
  width: 100%;
`;

export const TierPointsNumber = styled.View`
  display: flex;
  flex-direction: row;
  align-items: center;
`;

export const TierProgressContainer = styled.View`
  margin: 8px 0;
`;

export const TierCategoryContainer = styled.View`
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: ${({ align }: IStylesProps) => align};
`;

export const TierCategoryName = styled.View`
  display: flex;
  flex-direction: row;
  align-items: center;
`;

export const TierCategoryRest = styled.View`
  display: flex;
  flex-direction: row;
`;

export const WrapperLabel = styled.View`
  margin-left: 4px;
  flex-direction: row;
  align-items: flex-end;
`;
