import Header from '../../components/partials/header';
import Head from 'next/head';
import Link from 'next/link';

export default function SingleBooked() {
  return (
    <>

      <div className="flex h-screen overflow-hidden">
        {/* Sidebar would go here */}

        <div className="relative flex flex-col flex-1 overflow-x-hidden overflow-y-auto">
          {/* Small Device Overlay would go here */}

          {/* Header would go here */}
          <div className='flex bg-white dark:bg-gray-800 shadow-sm sticky top-0 z-50 w-full'>
          <Header />
          </div>

          <main>
            <div className="p-4 mx-auto max-w-[--breakpoint-2xl] md:p-6">
              <div>
                <h2 className="text-2xl">Generate Appointment Code</h2>
                <label htmlFor="appointmentDate">
                  Date:
                  <input type="date" name="appointmentDate" id="appointmentDate" />
                </label>
              </div>
              
              <div className="max-w-2xl mx-auto my-20 lg:my-32">
                <div className="text-center mb-6 lg:mb-16">
                  <h1 className="text-6xl text-blue-700 md:text-8xl">35</h1>
                  <h2 className="text-2xl">John Doe</h2>
                </div>
                <div className="flex flex-col gap-4 md:flex-row w-full">
                  <Link href="/staff-booking" className="w-full">
                    <button
                      className="text-center rounded-lg bg-blue-700 px-5 py-3.5 text-sm font-medium text-white shadow-theme-xs transition hover:bg-brand-600 w-full"
                    >
                      Book Another
                    </button>
                  </Link>
                  <Link href="#" className="w-full">
                    <button
                      className="text-center rounded-lg bg-white px-5 py-3.5 text-sm font-medium text-gray-700 shadow-theme-xs ring-1 ring-inset ring-gray-300 transition hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-400 dark:ring-gray-700 dark:hover:bg-white/[0.03] w-full"
                    >
                      Manage
                    </button>
                  </Link>
                </div>
              </div>
              
              <div className="text-center">
                <p>Note: Token booking is available for current date only i.e. Today</p>
              </div>
            </div>
          </main>
        </div>
      </div>
    </>
  );
}