import { StyleSheet, Switch, Text, View } from 'react-native';
import { fonts, m3Colors, spacing } from '../theme/proulr-theme';

export function ToggleRow({
  label,
  hint,
  value,
  onChange,
  disabled,
}: {
  label: string;
  hint?: string;
  value: boolean;
  onChange: (value: boolean) => void;
  disabled?: boolean;
}) {
  return (
    <View style={styles.row}>
      <View style={styles.copy}>
        <Text style={styles.label}>{label}</Text>
        {hint ? <Text style={styles.hint}>{hint}</Text> : null}
      </View>
      <Switch
        value={value}
        onValueChange={onChange}
        disabled={disabled}
        trackColor={{ false: m3Colors.surfaceContainerHighest, true: m3Colors.primary }}
        thumbColor={m3Colors.onPrimary}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: spacing.md,
    paddingVertical: spacing.xs,
  },
  copy: {
    flex: 1,
    gap: spacing.xs,
  },
  label: {
    color: m3Colors.onSurface,
    fontSize: 15,
    fontFamily: fonts.semibold,
  },
  hint: {
    color: m3Colors.onSurfaceVariant,
    fontSize: 12,
    lineHeight: 17,
    fontFamily: fonts.regular,
  },
});