import { StyleSheet } from 'react-native';
import { Colors } from 'src/theme';

export const styles = StyleSheet.create({
  notificationList: {
    gap: 12
  },
  notificationItem: {
    borderWidth: 1,
    borderRadius: 8,
    padding: 12,
    gap: 16,
    flex: 1
  },
  notificationIcon: {},
  notificationTextContainer: {
    flex: 1,
    gap: 12
  },
  notificationTitle: {
    fontSize: 14,
    fontFamily: 'montserrat-700',
    color: Colors.DARK_BLUE,
    flex: 1
  },
  notificationDescription: {
    fontSize: 12,
    fontWeight: '600',
    color: Colors.DARK_BLUE
  },
  notificationDate: {
    fontSize: 10,
    fontWeight: '600',
    color: Colors.DARK_BLUE,
    textAlign: 'right'
  },
  deleteButton: {
    borderWidth: 1,
    borderColor: Colors.RED,
    justifyContent: 'center',
    alignItems: 'center',
    width: 80,
    borderRadius: 8,
    gap: 12
  },
  deleteButtonText: {
    color: Colors.RED,
    fontWeight: '600',
    fontSize: 12
  },
  modalWrapper: {
    justifyContent: 'flex-end',
    margin: 0
  },
  modalContainer: {
    backgroundColor: Colors.WHITE,
    borderTopLeftRadius: 15,
    borderTopRightRadius: 15,
    padding: 16,
    paddingBottom: 32,
    alignItems: 'center',
    width: '100%'
  },
  modalIcon: {
    marginBottom: 16
  },
  modalTitle: {
    fontSize: 14,
    fontFamily: 'montserrat-700',
    color: Colors.DARK_BLUE
  },
  modalDescription: {
    fontSize: 12,
    color: Colors.DARK_BLUE,
    fontWeight: '600'
  },
  modalDate: {
    fontSize: 10,
    color: Colors.DARK_BLUE,
    fontWeight: '600',
    textAlign: 'right'
  },
  modalButton: {
    backgroundColor: Colors.ORANGE,
    paddingVertical: 12,
    paddingHorizontal: 32,
    borderRadius: 4,
    marginBottom: 12,
    borderWidth: 0.5,
    borderColor: Colors.ORANGE,
    width: '100%',
    alignItems: 'center'
  },
  modalButtonText: {
    fontSize: 15,
    color: Colors.WHITE,
    fontWeight: '700'
  },
  modalActionButton: {
    paddingVertical: 12,
    paddingHorizontal: 32,
    borderRadius: 4,
    borderWidth: 0.5,
    borderColor: Colors.DARK_BLUE,
    width: '100%',
    alignItems: 'center'
  },
  modalActionButtonText: {
    fontSize: 15,
    color: Colors.DARK_BLUE,
    fontWeight: '700'
  },
  notificationUnread: {
    backgroundColor: Colors.ORANGE,
    borderColor: Colors.ORANGE
  },
  notificationRead: {
    backgroundColor: Colors.WHITE,
    borderColor: Colors.DARK_BLUE
  }
});
