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

interface ITabContainerStylesProps {
  borderColor: colors;
  isSelected: boolean;
  tabWidth: string;
  tabHeight: string;
}

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


export const TabContainer = styled.View`
  width: ${({ tabWidth }: ITabContainerStylesProps) => tabWidth};
  height: ${({ tabHeight }: ITabContainerStylesProps) => tabHeight};
  display:flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-style: solid;
  border-color: ${({ borderColor, isSelected }: ITabContainerStylesProps) => isSelected ? borderColor : theme.transparent};
  border-bottom-width: 2px;
`

export const TabMenuParent = styled.View`
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
`