## Description Create the **Event/Day Card component** for Operation Surf as shown in the attached design. This is a sub-issue because the **Program Details** page will pull and render this card component in its list section. All displayed content on the card must be pulled from the database (no hardcoded values). The card should display the following Event/Day fields: - `dayOfWeek` - `date` - `name` - `startTime - endTime` Note: `eventId` and `programId` do not need to be displayed on the front end, but are required for linking and querying. ### Day data model - `name` - `dayOfWeek` - `date` - `startTime` - `endTime` - `eventId` - `programId` ## Image <img width="555" height="89" alt="Image" src="https://github.com/user-attachments/assets/d9eea8fc-bc4f-4350-a5d0-94e1339eeda8" /> ## Acceptance Criteria - [ ] Card UI matches the attached design (day + date pills, title, time row with icon). - [ ] Card fields (`dayOfWeek`, `date`, `name`, `startTime - endTime`) render from DB-provided data. - [ ] Card accepts Event/Day data as props (or equivalent) and does not fetch data itself. - [ ] `eventId` and `programId` are supported in the data interface but are not displayed. - [ ] Date/time formatting is consistent with the mock (e.g., `May 5`, `10:00 AM - 1:00 PM`). - [ ] Card is keyboard accessible and responsive across screen sizes. ## Steps - [ ] Build the card component layout to match the design (pills, title, time row). - [ ] Define the component interface/props to accept: `name`, `dayOfWeek`, `date`, `startTime`, `endTime`, `eventId`, `programId`. - [ ] Implement date formatting for the `date` field (e.g., `May 5`). - [ ] Implement time range formatting for `startTime` and `endTime` (e.g., `10:00 AM - 1:00 PM`). - [ ] Add basic error checking / fallbacks for missing fields (e.g., empty strings, invalid dates).