import {StyleSheet} from 'react-native';
import R from '../../assets/R';

const styles = StyleSheet.create({
  container_header: {
    flexDirection: 'row',
    marginHorizontal: 15,
  },
  spacing_header: {
    justifyContent: 'center',
    marginTop: 20,
  },
  size_box: {
    width: '20%',
  },
  size_box_2: {
    width: '2.5%',
  },
  search_box: {
    flex: 3,
    flexDirection: 'row',
    backgroundColor: R.colors.black250,
    alignItems: 'center',
    borderColor: R.colors.gray280,
    borderRadius: 100,
    height:35,
    paddingHorizontal: 10,
    paddingVertical: 5,
  },

  input: {
    fontSize: R.fontsize.fontsSize12,
    color: R.colors.white,
    margin: 0,
    padding: 0,
    fontFamily: R.fonts.InterRegular,
    fontWeight: '400',
    width: '100%',
  },
  /* -------------------------------------------------------------------------- */
  /*                                    Body                                    */
  /* -------------------------------------------------------------------------- */
  container_body: {
    flex: 1,
    backgroundColor: R.colors.white,
  },
  background_header: {
    height: 295,
    position: 'relative',
  },
  profile_card: {
    position: 'absolute',
    bottom: -30,
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: R.colors.white,
    paddingVertical: 10,
    paddingHorizontal: 15,
    marginHorizontal: 15,
    borderRadius: 15,
    shadowColor: R.colors.black,
    shadowOffset: {width: 0, height: 2},
    shadowOpacity: 0.22,
    shadowRadius: 2.22,
    elevation: 3,
  },
  profile_left: {
    flexDirection: 'row',
    alignItems: 'center',
    flex: 3,
  },

  avatar: {
    width: 37,
    height: 37,
    borderRadius: 20,
    backgroundColor: R.colors.white,
    overflow: 'hidden',
  },
  avatar_image: {
    width: '100%',
    height: '100%',
  },
  avatar_placeholder: {
    width: '100%',
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: R.colors.blue500,
  },
  avatar_text: {
    fontSize: R.fontsize.fontsSize14,
    fontWeight: '600',
    color: R.colors.white,
    fontFamily: R.fonts.InterSemiBold,
  },
  information: {
    flex: 2,
    marginLeft: 5,
  },
  text_card_info: {
    fontSize: R.fontsize.fontsSize12,
    fontWeight: '400',
    color: R.colors.black,
    fontFamily: R.fonts.InterRegular,
    numberOfLines: 1,
    ellipsizeMode: 'tail',
  },
  profile_btn: {
    paddingVertical: 5,
    paddingHorizontal: 10,
    backgroundColor: R.colors.gray220,
    height:30,
    borderRadius: 15,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  btn_text: {
    fontSize: R.fontsize.fontsSize12,
    fontWeight: '400',
    color: R.colors.black,
    fontFamily: R.fonts.InterRegular,
  },
  icon: {
    marginLeft: 5,
  },
  menu_container: {
    marginHorizontal: 15,
  },
  menu_title: {
    color: R.colors.txtMain,
    fontSize: R.fontsize.fontsSize14,
    fontWeight: '600',
    color: R.colors.black,
    fontFamily: R.fonts.InterMedium,
  },
  scroll: {
    flex: 1,
    marginTop: 35,
  },

  /* ---------------------------------- ITEM ---------------------------------- */
  menu_item: {
    alignItems: 'center',
    paddingVertical: 10,
    paddingHorizontal: 5,
    marginHorizontal: 5,
    marginVertical: 5,
    flex: 1,
    maxWidth: '30%',
    minHeight: '30%',
  },
  icon_container: {
    width: 35,
    height: 35,
    backgroundColor: R.colors.white,
  },
  menu_text: {
    fontSize: R.fontsize.fontsSize12,
    fontWeight: '600',
    color: R.colors.black,
    fontFamily: R.fonts.InterMedium,
    textAlign: 'center',
  },
});
export default styles;
