import { theme } from 'data/dataMx';
import styled from 'styled-components/native';

interface IStylesProps {
  flexDirection: string;
  height: string;
  menuMarginBottom: string;
  btnsContainerWidth: string;
  btnsHeight: string;
}

export const FooterContainer = styled.View`
  background-color: ${theme.neutral700};
  padding: 10%;
`;

export const FirstRow = styled.View`
  display: flex;
  align-items: center;
  padding-bottom: 7%;
`;

export const LogoContainer = styled.View`
  margin-bottom: 1%;
`;

export const FooterMenuContainer = styled.View`
  display: flex;
  flex-direction: ${({ flexDirection }: IStylesProps) => flexDirection};
  width: 80%;
  align-items: center;
  justify-content: space-around;
  height: ${({ height }: IStylesProps) => height};
  margin-bottom: ${({ menuMarginBottom }: IStylesProps) => menuMarginBottom};
`;

export const SocialMediaContainer = styled.View`
  display: none;
  flex-direction: row;
  width: 100%;
  justify-content: center;
  align-items: center;
`;

export const SocialMediaContainer2 = styled.View`
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: center;
  align-items: center;
`;

export const SocialMediaLink = styled.TouchableOpacity`
  margin: 0 3%;
`;

export const AppsButtonsContainer = styled.View`
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: ${({ btnsContainerWidth }: IStylesProps) => btnsContainerWidth};
  height: ${({ btnsHeight }: IStylesProps) => btnsHeight};
  margin-bottom: 4%;
  flex-direction: ${({ flexDirection }: IStylesProps) => flexDirection};
`;

export const FooterText = styled.View`
  text-align: center;
`;

export const FooterLink = styled.Text``;
