import { formatMoney } from "@/lib/format";
import { AdminBooking, STATUS_STYLES } from "./types";

export function BookingsTable({ bookings }: { bookings: AdminBooking[] }) {
  return (
    <div className="overflow-x-auto rounded-2xl border border-blush-dark/50 bg-white">
      <table className="w-full text-left text-sm">
        <thead className="bg-blush/60 text-xs uppercase tracking-wide-plus text-rose-dark">
          <tr>
            <th className="px-4 py-3">Date</th>
            <th className="px-4 py-3">Time</th>
            <th className="px-4 py-3">Service</th>
            <th className="px-4 py-3">Customer</th>
            <th className="px-4 py-3">Contact</th>
            <th className="px-4 py-3">Amount</th>
            <th className="px-4 py-3">Status</th>
          </tr>
        </thead>
        <tbody>
          {bookings.map((booking) => (
            <tr key={booking.id} className="border-t border-blush-dark/30">
              <td className="px-4 py-3">{booking.date}</td>
              <td className="px-4 py-3">{booking.startTime}</td>
              <td className="px-4 py-3">{booking.serviceName}</td>
              <td className="px-4 py-3">{booking.customerName}</td>
              <td className="px-4 py-3 text-ink/70">
                <div>{booking.customerEmail}</div>
                <div>{booking.customerPhone}</div>
              </td>
              <td className="px-4 py-3">
                {formatMoney(booking.amountPaidCents ?? booking.servicePriceCents)}
              </td>
              <td className="px-4 py-3">
                <span
                  className={`rounded-full px-3 py-1 text-xs capitalize ${
                    STATUS_STYLES[booking.status] ?? ""
                  }`}
                >
                  {booking.status}
                </span>
              </td>
            </tr>
          ))}
          {bookings.length === 0 && (
            <tr>
              <td colSpan={7} className="px-4 py-10 text-center text-ink/50">
                No bookings yet.
              </td>
            </tr>
          )}
        </tbody>
      </table>
    </div>
  );
}
