Default Component - Copy this React, Tailwind Component to your project

Generate a modern, responsive, and interactive event details modal with the following features: Event Details Display: 📌 Title: Displays the event title prominently at the top. 📅 Start & End Time: Shows the formatted start and end date/time. ⏳ All Day Indicator: A label if the event is marked as an all day event. 🌐 Publish Status: Shows if the event is published on the website. 📆 Off Day Shifts: Lists any days marked as off days for the event. 🔄 Recurrence: Displays whether the event repeats or not. 🏷 Category: Shows the event category (e.g., Meeting). Actions & Interactivity: ✏ Edit Button – Opens an edit form to modify the event details. 🗑 Delete Button – Triggers a confirmation before deleting the event. ❌ Close Button – Dismisses the modal. Enhancements & UX Features: 🎞 Smooth Animations – The modal should appear with a fade/slide effect. 🌗 Dark & Light Mode Support – Adjusts based on user preference. 📱 Fully Responsive – Works seamlessly on desktop and mobile. Ensure the modal has a clean, modern, and user friendly design, making it easy for users to view, edit, or delete event details.