import type { RecentOrder } from "@/lib/dashboard/mock-data";
import { formatRupiah } from "@/lib/dashboard/mock-data";
import { IconArrowRight } from "./dashboard-icons";

const statusStyles: Record<RecentOrder["status"], string> = {
  Selesai: "bg-success-50 text-success-700",
  Diproses: "bg-secondary-50 text-secondary-700",
  Menunggu: "bg-primary-50 text-primary-700",
};

const methodStyles: Record<RecentOrder["method"], string> = {
  "Dine In": "text-primary-600",
  Takeaway: "text-secondary-600",
  Delivery: "text-success-700",
};

type RecentOrdersProps = {
  orders: RecentOrder[];
};

export function RecentOrders({ orders }: RecentOrdersProps) {
  return (
    <section className="min-w-0 rounded-lg border border-neutral-40 bg-neutral-10 p-5">
      <div className="mb-5 flex items-center justify-between gap-3">
        <div>
          <h2 className="heading-s text-neutral-100">Pesanan Terbaru</h2>
          <p className="text-m-regular text-neutral-80">
            Transaksi terakhir dari operasional hari ini
          </p>
        </div>
        <button
          type="button"
          className="text-m-medium text-primary-500 hover:text-primary-600 flex items-center gap-1 transition-colors"
        >
          Lihat semua
          <IconArrowRight className="size-4" />
        </button>
      </div>

      <div className="-mx-5 min-w-0 overflow-x-auto px-5">
        <table className="min-w-[640px] w-full border-collapse">
          <thead>
            <tr className="border-b border-neutral-40 text-left">
              <th className="text-s-medium pb-3 text-neutral-80">ID Pesanan</th>
              <th className="text-s-medium pb-3 text-neutral-80">Pelanggan</th>
              <th className="text-s-medium pb-3 text-neutral-80">Metode</th>
              <th className="text-s-medium pb-3 text-neutral-80">Item</th>
              <th className="text-s-medium pb-3 text-neutral-80">Total</th>
              <th className="text-s-medium pb-3 text-neutral-80">Status</th>
              <th className="text-s-medium pb-3 text-right text-neutral-80">Waktu</th>
            </tr>
          </thead>
          <tbody>
            {orders.map((order) => (
              <tr
                key={order.id}
                className="border-b border-neutral-20 last:border-0 hover:bg-neutral-20/60"
              >
                <td className="text-m-medium py-3.5 text-neutral-100">{order.id}</td>
                <td className="text-m-regular py-3.5 text-neutral-100">
                  {order.customer}
                </td>
                <td className={`text-m-medium py-3.5 ${methodStyles[order.method]}`}>
                  {order.method}
                </td>
                <td className="text-m-regular py-3.5 text-neutral-80">
                  {order.items} item
                </td>
                <td className="text-m-medium py-3.5 text-neutral-100">
                  {formatRupiah(order.total)}
                </td>
                <td className="py-3.5">
                  <span
                    className={`text-s-medium inline-flex rounded-full px-2.5 py-1 ${statusStyles[order.status]}`}
                  >
                    {order.status}
                  </span>
                </td>
                <td className="text-m-regular py-3.5 text-right text-neutral-70">
                  {order.time}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </section>
  );
}