Shift Modal - Copy this React, Tailwind Component to your project

Design a modern, user friendly modal UI for a shift management system. The modal should display the following shift details: 1. Shift Name 2. Institute Name 3. Base (e.g., "Class") 4. Days (e.g., Monday to Friday) 5. Start Time and End Time (in a readable format) 6. Status (Enabled/Disabled) 7. Messages for Absence, Presence, Leave, and Holidays 8. Created At and Updated At timestamps (in a human readable format) Design guidelines: Use a clean, modern design with light colors and plenty of whitespace. The modal should be responsive and work on both desktop and mobile devices. Include clear headings and section dividers for different groups of information. The buttons should include "Close" and "Edit" options, with prominent, easy to click designs. The modal should use subtle animations for opening and closing (fade in, slide up). Icons should be used for visual representation where appropriate (e.g., status indicators, messages). Make the shift times (start and end) visually prominent, as they are critical information. Ensure high contrast for accessibility (e.g., good color contrast for text). The design should feel intuitive, with important details easy to scan at a glance. Bonus: Include a theme toggle for light and dark modes. Add a "View History" button to show past updates to the shift. Target audience: School administrators who manage class schedules and shifts.