import React from 'react';
import { Animated } from 'react-native';
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
import styled from 'styled-components/native';
import { Pressable } from '../Pressable';
import { RSValue, RFValue } from '../RFValue';
import { TextNative } from '../TextNative';

export const Container = styled.View`
   flex: 1;
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0px;
   left: 0px;
   right: 0px;
   bottom: 0px;
   z-index: 200;
`;

export const Opacity = styled(Animated.View)`
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0px;
   left: 0px;
   right: 0px;
   bottom: 0px;
   z-index: 1;
   background: black;
`;

export const ItemsContainer = styled.View`
   background: white;
   width: 100%;
   border-top-right-radius: 15px;
   border-top-left-radius: 15px;
   padding: ${RSValue(10)}px ${RSValue(20)}px;
   padding-bottom: ${RSValue(40)}px;
   margin-bottom: -${RSValue(20)}px;
`;

export const PanGesture = styled(Animated.View)`
   flex: 1;
   z-index: 2;
   justify-content: flex-end;
`;

export const Item = styled(Pressable)`
   padding: ${RSValue(20)}px 0px;
`;

export const FontAwesomeIconItem = styled(FontAwesomeIcon).attrs({
   size: RFValue(15.5),
})`
   width: ${RSValue(100)}px;
   align-self: center;
   margin-right: ${RSValue(15)}px;
`;

export const TextItem = styled(TextNative)``;
