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

export const styles = StyleSheet.create({
  fixerItemContainer: {
    paddingHorizontal: 16,
    paddingTop: 12,
    paddingBottom: 12,
    marginVertical: 8,
    backgroundColor: Colors.FILL_LIGHT,
    borderRadius: 8,
    gap: 12
  },
  fixerHeaderContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center'
  },
  fixerCountryContainer: {
    flexDirection: 'row',
    gap: 8,
    alignItems: 'center'
  },
  fixerCountryText: {
    fontSize: 14,
    fontWeight: '700',
    color: Colors.DARK_BLUE
  },
  divider: {
    height: 1,
    backgroundColor: Colors.DARK_LIGHT
  },
  flagIcon: {
    width: 24,
    height: 24,
    resizeMode: 'cover',
    borderWidth: 0.5,
    borderRadius: 12,
    borderColor: '#B4C2C7'
  },
  rateButton: {
    flexDirection: 'row',
    alignItems: 'center',
    borderRadius: 4,
    paddingVertical: 10,
    paddingHorizontal: 22,
    gap: 6,
    backgroundColor: Colors.ORANGE
  },
  rateButtonText: {
    fontSize: 13,
    color: Colors.WHITE,
    fontWeight: '700'
  },
  detailContainer: {
    gap: 16
  },
  labelText: {
    fontSize: 12,
    fontWeight: '600',
    color: Colors.DARK_BLUE,
    flex: 1
  },
  valueText: {
    fontSize: 12,
    color: Colors.ORANGE,
    fontWeight: '700',
    flex: 4
  },
  linkText: {
    fontSize: 12,
    color: Colors.ORANGE,
    fontWeight: '700'
  },
  ratingContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 2,
    flex: 4
  },
  rowContent: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 16
  }
});
