import React from 'react'
import { Pressable, Text, View } from 'react-native'
import { colorsV2 } from '../Colors'
import { TextStylesV2 } from '../Styles'

/*
 * Generic selector component
 */
interface SelectorProps<T> {
  options: readonly T[]
  onSelect: (option: T) => void
  selectedOption: T
  labelExtractor: (option: T) => string
  keyExtractor: (option: T) => string
}

export function Selector<T extends string>({
  options,
  onSelect,
  selectedOption,
  labelExtractor,
}: SelectorProps<T>): React.ReactElement {
  return (
    <View
      style={{
        flexDirection: 'row',
        justifyContent: 'center',
        height: 60,
        alignItems: 'center',
      }}
    >
      {options.map((option) => (
        <Pressable
          key={option}
          onPress={() => onSelect(option)}
          style={{ paddingHorizontal: 12 }}
        >
          <Text
            style={[
              TextStylesV2.body,
              { color: colorsV2.metals.metal0 },
              option === selectedOption ? { color: colorsV2.white } : null,
            ]}
          >
            {labelExtractor(option)}
          </Text>
        </Pressable>
      ))}
    </View>
  )
}