import React, { memo } from 'react';
import { StyleSheet, Switch, Text, View } from 'react-native';

type PharmacySwitchRowProps = {
  label: string;
  value: boolean;
  onChange: (value: boolean) => void;
};

const PharmacySwitchRow = ({
  label,
  value,
  onChange,
}: PharmacySwitchRowProps) => {
  return (
    <View style={styles.row}>
      <Text style={styles.label}>{label}</Text>
      <Switch
        value={value}
        onValueChange={onChange}
        trackColor={{ false: '#DADCE0', true: '#AECBFA' }}
        thumbColor={value ? '#1A73E8' : '#FFFFFF'}
      />
    </View>
  );
};

export default memo(PharmacySwitchRow);

const styles = StyleSheet.create({
  row: {
    paddingVertical: 12,
    borderBottomWidth: 1,
    borderColor: '#DADCE0',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  label: {
    color: '#202124',
    fontWeight: '500',
  },
});