feat: cho phép người dùng và người quản lí xóa bình luận

frontend/src/components/ConfirmModal.tsx

@@ -1,42 +1,53 @@
-import React, { useState } from 'react';
-import { X } from 'lucide-react';
+import React from 'react';
+import { AlertTriangle, X } from 'lucide-react';
 
 interface ConfirmModalProps {
   isOpen: boolean;
   title?: string;
-  message: string;
-  confirmText?: string;
-  cancelText?: string;
+  message?: string;
   onConfirm: () => void;
   onCancel: () => void;
 }
 
-export const ConfirmModal: React.FC<ConfirmModalProps> = ({
-  isOpen,
-  title = 'Xác nhận',
-  message,
-  confirmText = 'Xác nhận',
-  cancelText = 'Hủy',
-  onConfirm,
-  onCancel,
-}) => {
+export const ConfirmModal: React.FC<ConfirmModalProps> = ({ isOpen, title, message, onConfirm, onCancel }) => {
   if (!isOpen) return null;
 
   return (
-    <div className="fixed inset-0 z-[2200] flex items-center justify-center p-4">
-      <div className="absolute inset-0 bg-gray-900/70 backdrop-blur-sm" onClick={onCancel} />
-      <div className="relative w-full max-w-sm bg-white rounded-2xl shadow-2xl p-5">
-        <h3 className="text-base font-bold text-gray-900">{title}</h3>
-        <p className="mt-2 text-sm text-gray-600">{message}</p>
-        <div className="mt-4 flex justify-end gap-2">
-          <button onClick={onCancel} className="px-3 py-2 rounded-xl text-sm font-bold text-gray-600 hover:bg-gray-100 transition-colors">
-            {cancelText}
+    <div className="fixed inset-0 z-[6000] flex items-center justify-center p-4">
+      {/* Backdrop */}
+      <div className="absolute inset-0 bg-gray-900/60 backdrop-blur-sm animate-in fade-in duration-200" onClick={onCancel} />
+      
+      {/* Modal Content */}
+      <div className="relative w-full max-w-sm bg-white rounded-[32px] shadow-2xl p-8 animate-in zoom-in-95 duration-200">
+        <div className="flex justify-between items-center mb-4">
+          <div className="w-12 h-12 rounded-2xl bg-red-50 flex items-center justify-center text-red-500 shadow-inner">
+            <AlertTriangle className="w-6 h-6" />
+          </div>
+          <button onClick={onCancel} className="p-2 hover:bg-gray-100 rounded-full transition-colors">
+            <X className="w-5 h-5 text-gray-400" />
           </button>
-          <button onClick={onConfirm} className="px-3 py-2 bg-red-600 hover:bg-red-700 text-white rounded-xl text-sm font-bold transition-colors">
-            {confirmText}
+        </div>
+        
+        <h3 className="text-xl font-black text-gray-900 mb-2">{title || 'Xác nhận'}</h3>
+        <p className="text-sm text-gray-500 mb-8 leading-relaxed">
+          {message || 'Bạn có chắc chắn muốn thực hiện hành động này không?'}
+        </p>
+
+        <div className="grid grid-cols-2 gap-3">
+          <button
+            onClick={onCancel}
+            className="py-4 bg-gray-100 hover:bg-gray-200 text-gray-600 font-bold rounded-2xl transition-all active:scale-95"
+          >
+            Hủy bỏ
+          </button>
+          <button
+            onClick={onConfirm}
+            className="py-4 bg-red-600 hover:bg-red-700 text-white font-bold rounded-2xl shadow-lg shadow-red-100 transition-all active:scale-95"
+          >
+            Xác nhận
           </button>
         </div>
       </div>
     </div>
   );
-};
+};