import Order from "../models/order";
import "./stylesheets/shared.css";

function getRows(orders: Array<Order>) {
  const rows = orders.map(order => (
    <tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
      <td scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
        {order.id}
      </td>
      <td className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
        {order.public_id}
      </td>
      <td className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
        {order.created_at.toLocaleString().split('T')[0]}
      </td>
      <td className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
        {order.total}
      </td>
    </tr>
  ));

  return rows;
}

export default function OrderTable({ orders }) {
  const rows = getRows(orders);

  return(
    <div className="my-4 w-4/5 relative overflow-x-auto">
      <h1 className="text-2xl my-2">
        Historial de órdenes
      </h1>
      <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
        <thead className="bg-blue-arma text-xs text-white uppercase dark:bg-gray-700 dark:text-gray-400">
        <tr>
          <th scope="col" className="px-6 py-3">
            Número de orden
          </th>
          <th scope="col" className="px-6 py-3">
            Identificador
          </th>
          <th scope="col" className="px-6 py-3">
            Fecha
          </th>
          <th scope="col" className="px-6 py-3">
            Total
          </th>
        </tr>
        </thead>
        <tbody>
          {rows}
        </tbody>
      </table>
    </div>
  );
}