"use client";

import { useState } from "react";
import { BookingsTable } from "./bookings-table";
import { BookingsCalendar } from "./bookings-calendar";
import { AdminBooking } from "./types";

export function BookingsView({ bookings }: { bookings: AdminBooking[] }) {
  const [view, setView] = useState<"table" | "calendar">("table");

  return (
    <div>
      <div className="mb-6 inline-flex rounded-full border border-blush-dark/60 bg-white p-1">
        <button
          type="button"
          onClick={() => setView("table")}
          className={`rounded-full px-4 py-1.5 text-xs uppercase tracking-wide-plus transition ${
            view === "table" ? "bg-rosewood text-cream" : "text-rosewood hover:bg-blush"
          }`}
        >
          Table
        </button>
        <button
          type="button"
          onClick={() => setView("calendar")}
          className={`rounded-full px-4 py-1.5 text-xs uppercase tracking-wide-plus transition ${
            view === "calendar" ? "bg-rosewood text-cream" : "text-rosewood hover:bg-blush"
          }`}
        >
          Calendar
        </button>
      </div>

      {view === "table" ? (
        <BookingsTable bookings={bookings} />
      ) : (
        <BookingsCalendar bookings={bookings} />
      )}
    </div>
  );
}
