import type { ReactNode } from 'react';
import { Pressable, StyleSheet } from 'react-native';
import { m3Colors } from '../theme/proulr-theme';

const TOOLBAR_ICON_SIZE = 48;

export function ComposeToolbarIcon({
  label,
  active,
  children,
  onPress,
}: {
  label: string;
  active?: boolean;
  children: ReactNode;
  onPress: () => void;
}) {
  return (
    <Pressable
      onPress={onPress}
      accessibilityRole="button"
      accessibilityLabel={label}
      style={({ pressed }) => [
        styles.icon,
        active && styles.iconActive,
        pressed && { opacity: 0.75 },
      ]}
    >
      {children}
    </Pressable>
  );
}

const styles = StyleSheet.create({
  icon: {
    width: TOOLBAR_ICON_SIZE,
    height: TOOLBAR_ICON_SIZE,
    borderRadius: TOOLBAR_ICON_SIZE / 2,
    alignItems: 'center',
    justifyContent: 'center',
  },
  iconActive: {
    backgroundColor: m3Colors.primaryContainer,
  },
});