import type { DriverRecord } from '../types/tracking';

type DriverTableProps = {
  drivers: DriverRecord[];
};

export const DriverTable = ({ drivers }: DriverTableProps) => {
  return (
    <div className="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
      <div className="overflow-x-auto">
        <table className="min-w-full divide-y divide-slate-200 text-sm">
          <thead className="bg-slate-50">
            <tr>
              <th className="px-4 py-3 text-left font-semibold text-slate-600">Driver ID</th>
              <th className="px-4 py-3 text-left font-semibold text-slate-600">Latitude</th>
              <th className="px-4 py-3 text-left font-semibold text-slate-600">Longitude</th>
              <th className="px-4 py-3 text-left font-semibold text-slate-600">Last Updated</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-slate-100 bg-white">
            {drivers.length === 0 ? (
              <tr>
                <td colSpan={4} className="px-4 py-6 text-center text-slate-500">
                  No active drivers yet.
                </td>
              </tr>
            ) : (
              drivers.map((driver) => (
                <tr key={driver.driverId}>
                  <td className="px-4 py-3 font-medium text-slate-700">{driver.driverId}</td>
                  <td className="px-4 py-3 text-slate-600">{driver.lat.toFixed(6)}</td>
                  <td className="px-4 py-3 text-slate-600">{driver.lng.toFixed(6)}</td>
                  <td className="px-4 py-3 text-slate-600">{driver.lastUpdated}</td>
                </tr>
              ))
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
};