import { Pressable } from 'react-native';

import { Icon } from '../../atoms/Icon';
import { Text } from '../../atoms/Text';
import { cn } from '../../lib/cn';

import type { SelectOption } from './Select.types';

interface SelectOptionRowProps<TValue extends string> {
  option: SelectOption<TValue>;
  isSelected: boolean;
  onPress: (option: SelectOption<TValue>) => void;
}

export function SelectOptionRow<TValue extends string>({
  option,
  isSelected,
  onPress,
}: SelectOptionRowProps<TValue>) {
  return (
    <Pressable
      accessibilityRole="button"
      accessibilityState={{ selected: isSelected, disabled: !!option.disabled }}
      onPress={() => onPress(option)}
      disabled={option.disabled}
      className={cn(
        'flex-row items-center justify-between gap-2 px-3 py-3',
        isSelected && 'bg-primary-50',
        option.disabled && 'opacity-50',
      )}
    >
      <Text variant="bodyMedium" className="flex-1">
        {option.label}
      </Text>
      {isSelected ? <Icon name="check" size={16} className="text-primary" /> : null}
    </Pressable>
  );
}