import type { User } from '../types'
import { BackButton } from '../ui/BackButton'
import { AvailabilityCalendar } from '../AvailabilityCalendar'

interface IndicateAvailabilityProps {
    user: User
    onBack: () => void
}

export function IndicateAvailability({ user, onBack }: IndicateAvailabilityProps) {
    return (
        <div className="p-6">
            <div className="mb-6">
                <BackButton onClick={onBack} />
                <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
                    Indicate Availability
                </h1>
                <p className="text-gray-600 dark:text-gray-400">
                    Set your availability preferences and time slots for upcoming experiment runs.
                </p>
            </div>

            <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6">
                <AvailabilityCalendar user={user} />
            </div>
        </div>
    )
}