"use client";

import { useState } from "react";
import { CalendarIcon } from "lucide-react";
import { BookingSystem } from "./BookingSystem";

interface BookingButtonProps {
	currentUser: {
		id: string;
		emailVerified: boolean;
		is_banned: boolean;
		permissions: string[];
	};
}

export const BookingButton = ({ currentUser }: BookingButtonProps) => {
	const [isBookingSystemOpen, setIsBookingSystemOpen] = useState(false);

	// Check if user can access booking system
	const canAccessBookingSystem = currentUser && currentUser.emailVerified && !currentUser.is_banned;

	const handleOpenBookingSystem = () => {
		setIsBookingSystemOpen(true);
	};

	const handleCloseBookingSystem = () => {
		setIsBookingSystemOpen(false);
	};

	// Don't render the button if user doesn't have access
	if (!canAccessBookingSystem) {
		return null;
	}

	return (
		<>
			<button
				className="btn btn-sm btn-ghost tooltip tooltip-bottom"
				data-tip="Slot Buchung"
				onClick={handleOpenBookingSystem}
			>
				<CalendarIcon size={20} />
			</button>

			<BookingSystem
				isOpen={isBookingSystemOpen}
				onClose={handleCloseBookingSystem}
				currentUser={currentUser}
			/>
		</>
	);
};