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

export function ComposeVisibilityRow({
  label,
  icon,
  onPress,
  variant = 'footer',
}: {
  label: string;
  icon?: ReactNode;
  onPress?: () => void;
  variant?: 'inline' | 'footer';
}) {
  return (
    <Pressable
      onPress={onPress}
      disabled={!onPress}
      accessibilityRole="button"
      accessibilityLabel={label}
      style={({ pressed }) => [
        styles.row,
        variant === 'footer' && styles.rowFooter,
        pressed && onPress && { opacity: 0.82 },
      ]}
    >
      {icon ?? <AppIcon name="globe" color={m3Colors.primary} size={24} />}
      <Text style={styles.label}>{label}</Text>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: spacing.xs,
  },
  rowFooter: {
    paddingTop: spacing.sm,
    borderTopWidth: StyleSheet.hairlineWidth,
    borderTopColor: m3Colors.outlineVariant,
  },
  label: {
    color: m3Colors.primary,
    fontFamily: fonts.medium,
    fontSize: 13,
  },
});