cally/components/pages/settings/calendar_components/CalendarSettingsDialog.tsx

import React from "react";
import { Dialog, Button, Text, View } from "react-native-ui-lib";
import { StyleSheet } from "react-native";

interface ConfirmationDialogProps {
  visible: boolean;
  serviceName: "google" | "outlook" | "apple";
  email: string;
  onDismiss: () => void;
  onConfirm: () => void;
}

const CalendarSettingsDialog: React.FC<ConfirmationDialogProps> = ({
  visible,
  serviceName,
  email,
  onDismiss,
  onConfirm,
}) => {
  return (
    <Dialog
      visible={visible}
      onDismiss={onDismiss}
      containerStyle={styles.dialog}
    >
      <Text center style={styles.title}>
        Disconnect {serviceName}
      </Text>
      <View center>
        <Text style={styles.text} center>
          Are you sure you want to disconnect this {"\n"}
          <Text style={{ fontSize: 16, fontFamily: "PlusJakartaSans_700Bold" }}>
            {serviceName}
          </Text>{" "}
          calendar
          {"\n"}
          for {email}?
        </Text>
      </View>
      <View row right gap-8>
        <Button
          label="Cancel"
          onPress={onDismiss}
          style={styles.cancelBtn}
          color="#999999"
          labelStyle={{ fontFamily: "Poppins_500Medium", fontSize: 13.53 }}
        />
        <Button
          label="Yes"
          onPress={onConfirm}
          style={styles.confirmBtn}
          labelStyle={{ fontFamily: "PlusJakartaSans_500Medium" }}
        />
      </View>
    </Dialog>
  );
};

// Empty stylesheet for future styles
const styles = StyleSheet.create({
  confirmBtn: {
    backgroundColor: "#ea156d",
  },
  cancelBtn: {
    backgroundColor: "white",
  },
  dialog: {
    backgroundColor: "white",
    paddingHorizontal: 25,
    paddingTop: 35,
    paddingBottom: 17,
    borderRadius: 20,
  },
  title: {
    fontFamily: "Manrope_600SemiBold",
    fontSize: 22,
    marginBottom: 20,
  },
  text: {
    fontFamily: "PlusJakartaSans_400Regular",
    fontSize: 16,
    marginBottom: 25,
  },
});

export default CalendarSettingsDialog;