Lovable Prompt Creator - AI Prompt Generator

```markdown
## APPLICATION OVERVIEW
This web application is designed for a clinic's scheduling system, enabling secretaries to efficiently manage therapy appointments. The primary goal is to allow users to select a therapy and view available time slots based on the therapists' schedules and room availability, ensuring a seamless booking experience.

## CORE FEATURES
- **Therapy Selection**: A dropdown menu for secretaries to choose from various therapies offered at the clinic.
- **Date Picker**: A user-friendly calendar component to select the desired date for the appointment.
- **Available Time Slots**: A dynamic grid displaying available time slots, including the start and end times, therapist names, and room names.
- **Agendar Button**: A clearly labeled button for confirming appointments, which becomes active only when a valid time slot is selected.
- **Loading State**: A visual loading indicator that appears while the system fetches available time slots.
- **No Availability Message**: A clear message displayed when no time slots are available for the selected therapy and date.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - The layout features a clean and simple design with generous white space and a minimal color palette, focusing on clear typography.
- **Color Mode**: Light theme with dark text on light backgrounds to enhance readability and reduce strain.
- **Layout**: The main layout utilizes Bootstrap’s Grid system, with rows and columns to organize components effectively. The therapy selection and date picker are placed at the top, followed by a grid of available time slots.
- **Typography**: Utilize a modern sans-serif font such as "Roboto" or "Arial", ensuring a consistent hierarchy with headings and body text clearly differentiated through size and weight.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for type safety and better development experience.
- **Styling**: Bootstrap for layout and component styling.
- **UI Components**: Utilize shadcn/ui for pre-built components that align with the minimalist design.
- **State Management**: Use React hooks for managing state and side effects.

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project with TypeScript and install Bootstrap and shadcn/ui.
2. **Create Components**:
   - Build a `TherapySelector` component for therapy selection.
   - Implement a `DatePicker` component for selecting the appointment date.
   - Develop an `AvailableTimeSlots` component to display available time slots.
3. **Data Management**:
   - Create mock data arrays for therapies, therapists, rooms, and existing appointments to simulate backend functionality.
4. **Logic Implementation**:
   - Write logic to filter available therapists and time slots based on user input for therapy and date.
   - Implement loading states and messages for no availability.
5. **Responsive Design**: Ensure that all components are responsive and maintain usability across various devices.
6. **Testing**: Conduct thorough testing to ensure that all functionalities work as expected and the UI remains consistent.

## USER EXPERIENCE
As a secretary, the user will first select a therapy from the dropdown, followed by selecting a date using the date picker. Upon making these selections, the application will automatically update the available time slots in the grid below. The user will see loading feedback while the system processes the available slots and receive a notification if no slots are available. Once a valid time slot is selected, the "Agendar" button will become active, allowing the secretary to confirm the booking easily.
```