import { StyleSheet } from 'react-native';

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

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