'use client';

const ordersData = [
  {
    orderId: '12345',
    patientName: 'John Doe',
    status: 'Pending',
  },
  {
    orderId: '12346',
    patientName: 'Jane Smith',
    status: 'Completed',
  },
  {
    orderId: '12347',
    patientName: 'George Martin',
    status: 'Pending',
  },
];

export default function OrdersSection() {
  return (
    <div className="bg-white shadow rounded-lg p-6 space-y-4">
      <h2 className="text-xl font-semibold">Orders</h2>
      <table className="w-full text-sm text-left text-gray-700">
        <thead className="text-xs text-gray-500 uppercase border-b">
          <tr>
            <th className="px-4 py-2">Order ID</th>
            <th className="px-4 py-2">Patient Name</th>
            <th className="px-4 py-2">Status</th>
          </tr>
        </thead>
        <tbody>
          {ordersData.map((order) => (
            <tr key={order.orderId} className="border-b">
              <td className="px-4 py-2">{order.orderId}</td>
              <td className="px-4 py-2">{order.patientName}</td>
              <td className="px-4 py-2">
                <span
                  className={`px-2 py-1 rounded-full text-xs font-medium ${
                    order.status === 'Pending'
                      ? 'bg-yellow-100 text-yellow-800'
                      : 'bg-green-100 text-green-800'
                  }`}
                >
                  {order.status}
                </span>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}
