membership-fe/src/components/RejectionDialog.js

import React, { useState } from 'react';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from './ui/dialog';
import { Button } from './ui/button';
import { Textarea } from './ui/textarea';
import { Label } from './ui/label';
import { AlertTriangle, X } from 'lucide-react';

export default function RejectionDialog({ open, onOpenChange, onConfirm, user, loading }) {
  const [reason, setReason] = useState('');
  const [error, setError] = useState('');

  const handleSubmit = () => {
    if (!reason.trim()) {
      setError('Rejection reason is required');
      return;
    }
    onConfirm(reason);
  };

  const handleClose = () => {
    setReason('');
    setError('');
    onOpenChange(false);
  };

  return (
    <Dialog open={open} onOpenChange={handleClose}>
      <DialogContent className="sm:max-w-[500px] rounded-2xl border-2 border-[#ddd8eb]">
        <DialogHeader>
          <div className="flex items-center gap-3 mb-2">
            <div className="p-3 bg-red-100 rounded-full">
              <AlertTriangle className="h-6 w-6 text-red-600" />
            </div>
            <DialogTitle className="text-2xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
              Reject Application
            </DialogTitle>
          </div>
          <DialogDescription className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
            You are about to reject <strong>{user?.first_name} {user?.last_name}</strong>'s membership application.
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-4 py-4">
          <div className="bg-[#f9f5ff] border border-[#ddd8eb] rounded-lg p-4">
            <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
              <strong>Applicant:</strong> {user?.email}
            </p>
            <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
              <strong>Status:</strong> {user?.status}
            </p>
          </div>

          <div className="space-y-2">
            <Label htmlFor="reason" className="text-[#422268] font-medium">
              Rejection Reason <span className="text-red-500">*</span>
            </Label>
            <Textarea
              id="reason"
              value={reason}
              onChange={(e) => {
                setReason(e.target.value);
                setError('');
              }}
              placeholder="Please provide a clear reason for rejection. This will be sent to the applicant."
              className="rounded-xl border-2 border-[#ddd8eb] focus:border-red-500 min-h-[120px]"
              disabled={loading}
            />
            {error && (
              <p className="text-sm text-red-500">{error}</p>
            )}
            <p className="text-xs text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
              The applicant will receive an email with this reason.
            </p>
          </div>
        </div>

        <div className="flex gap-3 justify-end">
          <Button
            type="button"
            onClick={handleClose}
            variant="outline"
            className="border-2 border-[#ddd8eb] text-[#664fa3] hover:bg-[#f1eef9] rounded-full px-6"
            disabled={loading}
          >
            <X className="h-4 w-4 mr-2" />
            Cancel
          </Button>
          <Button
            type="button"
            onClick={handleSubmit}
            className="bg-red-600 text-white hover:bg-red-700 rounded-full px-6"
            disabled={loading}
          >
            <AlertTriangle className="h-4 w-4 mr-2" />
            {loading ? 'Rejecting...' : 'Confirm Rejection'}
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  );
}