// seniorendienst-frontend/src/components/ServiceList.jsx
import React from 'react';
import ServiceItem from './ServiceItem';

const ServiceList = ({ entries, onEdit, onDelete }) => {
  
  if (entries.length === 0) {
    return <p className="no-appointments-message">Noch keine Service-Einträge vorhanden.</p>;
  }

  return (
    <div className="service-table-container">
      <table className="service-table">
        <thead>
          <tr>
            <th>Anfrage</th>
            <th>Name</th>
            <th>Straße</th>
            <th>PLZ/Ort</th>
            <th>Termin</th>
            <th>Bezahlt</th>
            <th>Aktionen</th>
          </tr>
        </thead>
        <tbody>
          {entries
            .sort((a, b) => a.appointmentDate - b.appointmentDate)
            .map(entry => (
              <ServiceItem 
                key={entry.id} 
                entry={entry} 
                onEdit={onEdit} 
                onDelete={onDelete} 
              />
            ))}
        </tbody>
      </table>
    </div>
  );
};

export default ServiceList;