import React from 'react';
import { ScheduleItem } from '../types';

interface LiveOrdersTableProps {
  orders: ScheduleItem[];
}

export const LiveOrdersTable: React.FC<LiveOrdersTableProps> = ({ orders }) => {
  return (
    <div className="content-card">
      <h2 className="card-heading">Heutige Live-Aufträge (Dispatching)</h2>
      <table className="orders-table">
        <thead>
          <tr>
            <th>Kunde</th>
            <th>Monteur</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          {orders.map((order) => (
            <tr key={order.id}>
              <td style={{ fontWeight: 600, color: '#0f172a' }}>{order.customerName}</td>
              <td style={{ color: '#334155' }}>{order.technicianName}</td>
              <td>
                <span
                  className={`badge ${
                    order.status === 'In Bearbeitung'
                      ? 'badge-in-progress'
                      : 'badge-scheduled'
                  }`}
                >
                  {order.status === 'Geplant' ? `Geplant (${order.startTime})` : order.status}
                </span>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};