Checkmark List

import { Pressable, Text, View } from 'react-native'
import { useTheme } from '@/lib/theme'

const OPTIONS = ['system', 'light', 'dark'] as const
const LABELS = { system: 'System', light: 'Light', dark: 'Dark' }

export function ThemeList() {
  const { theme, preference, setTheme, isTransitioning } = useTheme()

  return (
    <View
      style={{
        backgroundColor: theme.colors.card,
        borderRadius: 16,
        borderWidth: 1,
        borderColor: theme.colors.border,
        overflow: 'hidden',
      }}
    >
      {OPTIONS.map((option, i) => (
        <Pressable
          key={option}
          disabled={isTransitioning}
          onPress={() => setTheme(option)}
          style={{
            flexDirection: 'row',
            justifyContent: 'space-between',
            alignItems: 'center',
            paddingVertical: 13,
            paddingHorizontal: 16,
            borderBottomWidth: i < OPTIONS.length - 1 ? 1 : 0,
            borderBottomColor: theme.colors.border,
          }}
        >
          <Text style={{ fontSize: 16, color: theme.colors.text }}>
            {LABELS[option]}
          </Text>
          {option === preference && (
            <Text
              style={{
                fontSize: 17,
                color: theme.colors.primary,
                fontWeight: '600',
              }}
            >
              ✓
            </Text>
          )}
        </Pressable>
      ))}
    </View>
  )
}