import { Pressable, StyleSheet, Text } from 'react-native';
import { AppIcon } from './app-icon';
import { fonts, m3Colors, m3Shape, spacing } from '../theme/proulr-theme';

export function ComposeAudiencePill({
  label,
  onPress,
}: {
  label: string;
  onPress?: () => void;
}) {
  return (
    <Pressable
      onPress={onPress}
      disabled={!onPress}
      accessibilityRole="button"
      accessibilityLabel={label}
      style={({ pressed }) => [styles.pill, pressed && onPress && { opacity: 0.82 }]}
    >
      <Text style={styles.label}>{label}</Text>
      <AppIcon name="chevron-down" size={14} color={m3Colors.onPrimaryContainer} />
    </Pressable>
  );
}

const styles = StyleSheet.create({
  pill: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: spacing.xs,
    paddingHorizontal: spacing.sm,
    paddingVertical: spacing.xs,
    borderRadius: m3Shape.cornerFull,
    borderWidth: 1,
    borderColor: m3Colors.primary,
    backgroundColor: m3Colors.primaryContainer,
  },
  label: {
    color: m3Colors.onPrimaryContainer,
    fontFamily: fonts.medium,
    fontSize: 13,
  },
});