<section class="prescriptions-section">
  <div class="section-header">
    <h2>Prescriptions</h2>
    <p>Medication orders managed by your clinical team</p>
  </div>

  <div *ngIf="prescriptions.length === 0" class="empty-state">No prescriptions found</div>

  <div *ngFor="let prescription of prescriptions" class="prescription-card">
    <div class="prescription-header">
      <div>
        <h3>{{ prescription.medicationName }}</h3>
        <p class="prescription-number">#{{ prescription.prescriptionNumber }}</p>
      </div>
      <span class="prescription-status" [class]="'status-' + prescription.status.toLowerCase()">
        {{ prescription.status }}
      </span>
    </div>
    <div class="prescription-details">
      <p><strong>Dosage:</strong> {{ prescription.dosage }}</p>
      <p><strong>Frequency:</strong> {{ prescription.frequency }}</p>
      <p><strong>Quantity:</strong> {{ prescription.quantity }}</p>
      <p *ngIf="prescription.refills > 0"><strong>Refills:</strong> {{ prescription.refills }}</p>
      <p *ngIf="prescription.instructions"><strong>Instructions:</strong> {{ prescription.instructions }}</p>
      <p><strong>Start Date:</strong> {{ formatDateFn(prescription.startDate) }}</p>
      <p *ngIf="prescription.endDate"><strong>End Date:</strong> {{ formatDateFn(prescription.endDate) }}</p>
      <p *ngIf="prescription.pharmacyName"><strong>Pharmacy:</strong> {{ prescription.pharmacyName }}</p>
    </div>
  </div>
</section>

