import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function PhonePrefix({ focused }: { focused: boolean }) {
  return (
    <View style={styles.prefixContainer}>
      <Text style={[styles.prefix, focused && styles.prefixFocused]}>+998</Text>
      <View style={styles.divider} />
    </View>
  );
}

const styles = StyleSheet.create({
  prefixContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginRight: 12,
  },
  prefix: {
    fontSize: 16,
    fontWeight: '600',
    color: '#475569',
    letterSpacing: 0.3,
  },
  prefixFocused: {
    color: '#0f172a',
  },
  divider: {
    width: 1.5,
    height: 24,
    backgroundColor: '#e2e8f0',
    marginLeft: 12,
  },
});