import { View } from "react-native";
import Card from "../../Components/Card";
import { useContext, useState } from "react";
import MySwitch from "../../Components/Switch";
import MySlider from "../../Components/Slider";
import { AppContext, IsPlatformIos } from "../../utils";
import MyIcon from "../../Components/Icon";

export default function MotorView() {
  const appContext = useContext(AppContext);
  const [switchState, setSwitchState] = useState(false);

  return (
    <Card>
      <View
        style={[
          { flexDirection: "row", alignItems: "center" },
          IsPlatformIos() && { gap: 10 },
        ]}
      >
        <MySwitch
          value={switchState}
          onValueChange={(e) => setSwitchState(e)}
        />
        <MyIcon name="fan" color={appContext.appTheme.icon} size={20} />

        <View style={{ flex: 1 }}>
          <MySlider />
        </View>
      </View>
    </Card>
  );
}
