import { StyleSheet } from 'react-native';

export const HomeStyle = () =>
  StyleSheet.create({
    container: {
      flex: 1,
    },
    header: {
      backgroundColor: '#28A7E8',
      height: 80,
      paddingHorizontal: 10,
      paddingVertical: 10,
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
    },
    title: {
      color: '#fff',
      fontSize: 20,
    },
    logo: {
      flexDirection: 'row',
      alignItems: 'center',
      gap: 5,
    },
    links: {
      flexDirection: 'row',
      alignItems: 'center',
      gap: 15,
    },
    autoContainer: {
      borderRadius: 8,
      padding: 8,
      backgroundColor: '#FFFFFF',
      gap: 8,
      shadowColor: '#000',
      shadowOffset: { width: 0, height: 1 },
      shadowOpacity: 0.1,
      shadowRadius: 2,
      elevation: 2,
    },
    autoCard: {
      flexDirection: 'row',
      justifyContent: 'space-between',
    },
    reysTitle: {
      fontSize: 20,
      color: '#28A7E8',
      fontFamily: 'GolosText-Bold',
    },
    text: {
      fontWeight: '500',
      color: 'red',
      fontSize: 14,
    },
    box: {
      backgroundColor: '#28A7E81A',
      padding: 10,
      width: 'auto',
      alignSelf: 'flex-start',
      borderRadius: 8,
    },
    date: {
      backgroundColor: '#28A7E8',
      width: '13%',
      height: 50,
      textAlign: 'center',
      justifyContent: 'center',
      alignItems: 'center',
      borderRadius: 8,
      padding: 0,
    },
    dateLabel: {
      fontSize: 14,
      fontWeight: '500',
      color: '#FFFFFF',
    },

    cardHeader: {
      flexDirection: 'row',
      justifyContent: 'space-between',
    },
    logoIcon: {
      width: 50,
      height: 50,
      resizeMode: 'contain',
    },
    bellWrapper: {
      position: 'relative',
    },
    bellDot: {
      width: 10,
      height: 10,
      position: 'absolute',
      backgroundColor: 'red',
      right: 2,
      borderRadius: 100,
    },
    divider: {
      height: 2,
      width: '100%',
      backgroundColor: '#28A7E81F',
    },
    cardBody: {
      flexDirection: 'row',
      justifyContent: 'space-between',
    },
    infoBlock: {
      alignItems: 'center',
      flexDirection: 'row',
      gap: 6,
    },
    iconBox: {
      backgroundColor: '#28A7E81A',
      padding: 8,
      borderRadius: 8,
    },
    infoTextBlock: {
      flexDirection: 'column',
    },
    infoTitle: {
      fontWeight: '500',
      fontSize: 18,
    },
    infoSubtext: {
      fontWeight: '500',
      fontSize: 14,
      color: '#00000066',
    },
    subtextRight: {
      textAlign: 'right',
    },
    highlightBox: {
      backgroundColor: '#69ec6d9c',
      alignSelf: 'flex-start',
      padding: 4,
      borderRadius: 8,
    },
    highlightText: {
      fontSize: 16,
    },
    animatedIconWrapper: {
      width: '80%',
      height: 40,
    },
    row: {
      // flexDirection: 'row',
      // gap: 10,
      // width: '100%',
    },
    rowFull: {
      flexDirection: 'row',
      gap: 2,
    },
    tabs: {
      borderRadius: 8,
    },
    // tabsContainer: {
    //   marginLeft: 'auto',
    //   paddingLeft: 8,
    //   paddingRight: 18,
    //   flexDirection: 'row',
    //   gap: 8,
    // },
    tabsLogo: {
      width: '40%',
      height: '50%',
      objectFit: 'contain',
    },
    tabsText: {
      width: '60%',
      color: '#FFFFFF',
      fontSize: 14,
      fontFamily: 'GolosText-Bold',
    },
  });
