import React from "react";
import { Pressable, Text } from "react-native";
import type { CountryItem } from "../../types";
import { styles } from "./CountryPickerBottomSheet.styles";

interface CountryRowProps {
  item: CountryItem;
  isSelected: boolean;
  onPress: (country: CountryItem) => void;
}

const CountryRowComponent = ({ item, isSelected, onPress }: CountryRowProps) => {
  return (
    <Pressable
      accessibilityRole="button"
      accessibilityLabel={`Select ${item.name}`}
      onPress={() => onPress(item)}
      style={[styles.countryRow, isSelected && styles.countryRowSelected]}
    >
      <Text style={styles.countryFlag}>{item.flag}</Text>
      <Text style={styles.countryName}>{item.name}</Text>
      <Text style={styles.countryDialCode}>{item.dialCode}</Text>
    </Pressable>
  );
};

export const CountryRow = React.memo(CountryRowComponent);