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

import { colors } from '../theme/colors';

// Hardcoded 6-emoji quick reactor shown at the top of the long-press
// sheet. A full emoji picker is post-Phase-4; this is the Discord-style
// fast path the vast majority of reactions go through.
export const QUICK_REACTIONS = ['👍', '❤️', '😂', '😮', '😢', '🎉'] as const;

export function ReactionStrip({ onReact }: { onReact: (emoji: string) => void }) {
  return (
    <View style={styles.row}>
      {QUICK_REACTIONS.map((e) => (
        <Pressable
          key={e}
          onPress={() => onReact(e)}
          style={({ pressed }) => [styles.button, pressed && styles.buttonPressed]}
          hitSlop={6}
        >
          <Text style={styles.emoji}>{e}</Text>
        </Pressable>
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    paddingVertical: 12,
    paddingHorizontal: 8,
    borderBottomColor: colors.border,
    borderBottomWidth: 1,
  },
  button: {
    width: 44,
    height: 44,
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 22,
  },
  buttonPressed: { backgroundColor: colors.accentMuted },
  emoji: { fontSize: 26 },
});