import { colors } from '@/assets/styles/colors';
import { fonts } from '@/assets/styles/fonts';
import { StyleSheet } from 'react-native';

export default StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: colors.background_1,
  },
  content: {
    paddingHorizontal: 16,
    paddingTop: 16,
    paddingBottom: 200,
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 12,
    marginBottom: 18,
  },
  backButton: {
    width: 40,
    height: 40,
    borderRadius: 20,
    backgroundColor: '#EEF0F5',
    alignItems: 'center',
    justifyContent: 'center',
  },
  logo: {
    width: 160,
    height: 34,
  },
  title: {
    fontSize: 24,
    color: colors.azul,
    fontFamily: fonts.bold,
    marginBottom: 12,
  },
  userCard: {
    backgroundColor: colors.branco,
    borderRadius: 16,
    paddingHorizontal: 18,
    paddingVertical: 16,
    marginBottom: 14,
  },
  userName: {
    fontSize: 24,
    color: colors.azul,
    fontFamily: fonts.bold,
  },
  userEmail: {
    fontSize: 12,
    color: '#4A6592',
    fontFamily: fonts.regular,
  },
  menuCard: {
    backgroundColor: colors.branco,
    borderRadius: 16,
    overflow: 'hidden',
  },
  menuRow: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 18,
    paddingVertical: 16,
  },
  menuLeft: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 12,
  },
  menuText: {
    fontSize: 18,
    color: colors.azul,
    fontFamily: fonts.regular,
    
  },
  divider: {
    height: 1,
    backgroundColor: '#EEF0F5',
    marginHorizontal: 16,
  },
  editBodyWrap: {
    overflow: 'hidden',
  },
  editBodyMeasure: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
  },
  accordionContent: {
    paddingHorizontal: 16,
    paddingBottom: 16,
    gap: 10,
  },
  rowInputs: {
    flexDirection: 'row',
    gap: 8,
  },
  inputBlock: {
    flex: 1,
  },
  inputBlockFull: {},
  inputLabel: {
    color: colors.azul,
    fontFamily: fonts.bold,
    fontSize: 16,
    marginBottom: 6,
  },
  required: {
    color: colors.vermelho,
  },
  input: {
    height: 48,
    borderWidth: 1,
    borderColor: '#C7CEDB',
    borderRadius: 12,
    paddingHorizontal: 12,
    color: '#1F2937',
    fontFamily: fonts.regular,
    fontSize: 16,
    backgroundColor: '#FAFBFD',
  },
  saveButton: {
    marginTop: 8,
    height: 48,
    borderRadius: 10,
    backgroundColor: colors.azul,
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'row',
    gap: 6,
  },
  saveButtonText: {
    color: colors.branco,
    fontFamily: fonts.medium,
    fontSize: 18,
  },
  saveButtonIcon: {
    width: 14,
    height: 14,
  },
  deleteProfileButtonIcon: {
    width: 22,
    height: 18,
  },
  arrowUpButtonIcon: {
    width: 14,
    height: 14,
    color: colors.azul
  },
  modalOverlay: {
    flex: 1,
    backgroundColor: 'rgba(30, 41, 59, 0.45)',
    justifyContent: 'center',
    paddingHorizontal: 16,
  },
  modalCard: {
    backgroundColor: colors.branco,
    borderRadius: 16,
    paddingHorizontal: 18,
    paddingTop: 22,
    paddingBottom: 16,
    alignItems: 'center',
  },
  modalIconWrap: {
    width: 42,
    height: 42,
    borderRadius: 21,
    backgroundColor: colors.vermelho,
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 12,
  },
  modalTitle: {
    fontSize: 24,
    color: colors.azul,
    fontFamily: fonts.bold,
    marginBottom: 8,
    textAlign: 'center',
  },
  modalSubtitle: {
    fontSize: 16,
    color: colors.azul,
    fontFamily: fonts.regular,
    textAlign: 'center',
    marginBottom: 16,
    lineHeight: 22,
  },
  modalButtons: {
    width: '100%',
    flexDirection: 'row',
    gap: 8,
  },
  modalButton: {
    flex: 1,
    height: 44,
    borderRadius: 10,
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'row',
    gap: 6,
  },
  modalPrimaryButton: {
    backgroundColor: colors.azul,
  },
  modalSecondaryButton: {
    backgroundColor: colors.branco,
    borderWidth: 1,
    borderColor: colors.azul,
  },
  modalPrimaryText: {
    color: colors.branco,
    fontSize: 18,
    fontFamily: fonts.medium,
  },
  modalSecondaryText: {
    color: colors.azul,
    fontSize: 18,
    fontFamily: fonts.medium,
  },
  modalButtonIcon: {
    transform: [{ rotate: '45deg' }],
  },
  perfilIcon: {
    width: 16,
    height: 19,
  },
});