maternal-app/maternal-web/components/family/RemoveMemberDialog.tsx

'use client';

import {
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  Button,
  Typography,
} from '@mui/material';
import { Warning } from '@mui/icons-material';

interface RemoveMemberDialogProps {
  open: boolean;
  onClose: () => void;
  onConfirm: () => void;
  memberName: string;
  isLoading?: boolean;
}

export function RemoveMemberDialog({
  open,
  onClose,
  onConfirm,
  memberName,
  isLoading = false,
}: RemoveMemberDialogProps) {
  return (
    <Dialog
      open={open}
      onClose={onClose}
      maxWidth="xs"
      fullWidth
      aria-labelledby="remove-member-dialog-title"
      aria-describedby="remove-member-dialog-description"
      role="alertdialog"
    >
      <DialogTitle id="remove-member-dialog-title" sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
        <Warning color="warning" aria-hidden="true" />
        Remove Family Member
      </DialogTitle>
      <DialogContent>
        <Typography variant="body1" id="remove-member-dialog-description">
          Are you sure you want to remove <strong>{memberName}</strong> from your family?
        </Typography>
        <Typography variant="body2" color="text.secondary" sx={{ mt: 2 }}>
          This member will lose access to all family data and activities.
        </Typography>
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose} disabled={isLoading}>
          Cancel
        </Button>
        <Button onClick={onConfirm} color="error" variant="contained" disabled={isLoading}>
          {isLoading ? 'Removing...' : 'Remove Member'}
        </Button>
      </DialogActions>
    </Dialog>
  );
}