'use client';
import { useState } from 'react';
import { AlertModal } from '@/src/components/common/AlertModal';
import { Textarea } from '@/components/ui/textarea';
import { Label } from '@/components/ui/label';

interface RejectProjectModalProps {
  isOpen: boolean;
  onClose: () => void;
  onConfirm: (message: string) => void;
  projectTitle: string;
}

export function RejectProjectModal({ isOpen, onClose, onConfirm, projectTitle }: RejectProjectModalProps) {
  const [rejectionMessage, setRejectionMessage] = useState('');

  const handleConfirm = () => {
    onConfirm(rejectionMessage);
    setRejectionMessage('');
  };

  return (
    <AlertModal
      isOpen={isOpen}
      onClose={onClose}
      onConfirm={handleConfirm}
      title="Reject Project"
      description={`Please provide a reason for rejecting "${projectTitle}"`}
      actionLabel="Reject Project"
      cancelLabel="Cancel"
    >
      <div className="mt-4 space-y-2">
        <Label htmlFor="rejectionMessage">Rejection Reason</Label>
        <Textarea
          id="rejectionMessage"
          value={rejectionMessage}
          onChange={(e) => setRejectionMessage(e.target.value)}
          placeholder="Explain why are you rejecting the project..."
          className="min-h-[100px] bg-neutral-200 text-neutral-800 placeholder:text-neutral-500 border-neutral-600 rounded-md"
          required
        />
      </div>
    </AlertModal>
  );
}
