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

interface ToggleSwitchProps {
  value: boolean;
  onValueChange?: (v: boolean) => void;
}

/** iOS 风格开关 — primary 色轨道 + 白色滑块 */
export function ToggleSwitch({ value, onValueChange }: ToggleSwitchProps) {
  return (
    <Pressable
      onPress={() => onValueChange?.(!value)}
      className={`w-12 h-7 rounded-full px-1 justify-center ${
        value ? 'bg-primary' : 'bg-surface-container-highest'
      }`}
    >
      <View
        className="w-5 h-5 bg-surface-container-lowest rounded-full shadow-sm"
        style={{ alignSelf: value ? 'flex-end' : 'flex-start' }}
      />
    </Pressable>
  );
}
