"use client";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
import React from "react";

const Jadwal = () => {
  return (
    <>
    {/* Awal Komponen Kiri */}
    <div className="relative md:py-24 py-16 md:pb-0 pb-0 bg-gray-50 dark:bg-slate-800">
      <div className="container relative">
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <a className="text-black flex flex-row gap-2 items-center mx-3 cursor-pointer">
              <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
                <path fill="#000" d="M20 3H4a1 1 0 0 0-1 1v2.227l.008.223a3 3 0 0 0 .772 1.795L8 12.886V21a1 1 0 0 0 1.316.949l6-2l.108-.043A1 1 0 0 0 16 19v-6.586l4.121-4.12A3 3 0 0 0 21 6.171V4a1 1 0 0 0-1-1" />
              </svg>
              Filter
              <svg className="flex items-center justify-center" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
                <path fill="currentColor" fill-rule="evenodd" d="m6 7l6 6l6-6l2 2l-8 8l-8-8z" />
              </svg>
            </a>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="flex p-0 rounded-md overflow-hidden">
            <DropdownMenuItem className="flex flex-col items-center justify-between gap-1.5 p-2 border-b text-default-600 focus:bg-default focus:text-primary-foreground rounded-none">
              <div className="gap-6"> Filter <button className="text-blue-400">Simpan</button></div>
              <div className="border-t border-black my-4"></div>
              <div>Region Filter</div>
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>

      <div className="container-fluid relative">
        <div className="grid grid-cols-1 mt-8">
          <div className="relative overflow-x-auto block w-3/4 bg-white dark:bg-slate-900">
            <table className="w-full text-sm text-start">
              <thead className="text-lg">
                <tr>
                  <th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[120px]">Time Table</th>
                  <th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[200px]">Monday</th>
                  <th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[200px]">Tuesday</th>
                  <th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[200px]">Wednesday</th>
                  <th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[200px]">Thursday</th>
                  <th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[200px]">Friday</th>
                  <th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[200px]">Saturday</th>
                  <th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[200px]">Sunday</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th className="text-center border border-gray-100 dark:border-gray-700 py-5">06:00</th>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                </tr>

                <tr>
                  <th className="text-center border border-gray-100 dark:border-gray-700 py-5">07:00</th>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                </tr>

                <tr>
                  <th className="text-center border border-gray-100 dark:border-gray-700 py-5">08:00</th>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                </tr>

                <tr>
                  <th className="text-center border border-gray-100 dark:border-gray-700 py-5">09:00</th>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                </tr>

                <tr>
                  <th className="text-center border border-gray-100 dark:border-gray-700 py-5">10:00</th>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                </tr>

                <tr>
                  <th className="text-center border border-gray-100 dark:border-gray-700 py-5">11:00</th>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                </tr>

                <tr>
                  <th className="text-center border border-gray-100 dark:border-gray-700 py-5">12:00</th>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                </tr>

                <tr>
                  <th className="text-center border border-gray-100 dark:border-gray-700 py-5">13:00</th>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                </tr>

                <tr>
                  <th className="text-center border border-gray-100 dark:border-gray-700 py-5">14:00</th>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                </tr>

                <tr>
                  <th className="text-center border border-gray-100 dark:border-gray-700 py-5">15:00</th>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                </tr>

                <tr>
                  <th className="text-center border border-gray-100 dark:border-gray-700 py-5">16:00</th>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                </tr>

                <tr>
                  <th className="text-center border border-gray-100 dark:border-gray-700 py-5">17:00</th>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                </tr>

                <tr>
                  <th className="text-center border border-gray-100 dark:border-gray-700 py-5">18:00</th>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                </tr>

                <tr>
                  <th className="text-center border border-gray-100 dark:border-gray-700 py-5">19:00</th>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                </tr>

                <tr>
                  <th className="text-center border border-gray-100 dark:border-gray-700 py-5">20:00</th>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                </tr>

                <tr>
                  <th className="text-center border border-gray-100 dark:border-gray-700 py-5">21:00</th>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                </tr>

                <tr>
                  <th className="text-center border border-gray-100 dark:border-gray-700 py-5">22:00</th>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                </tr>

                <tr>
                  <th className="text-center border border-gray-100 dark:border-gray-700 py-5">23:00</th>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                </tr>

                <tr>
                  <th className="text-center border border-gray-100 dark:border-gray-700 py-5">24:00</th>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                </tr>

                <tr>
                  <th className="text-center border border-gray-100 dark:border-gray-700 py-5">01:00</th>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                </tr>

                <tr>
                  <th className="text-center border border-gray-100 dark:border-gray-700 py-5">02:00</th>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                </tr>

                <tr>
                  <th className="text-center border border-gray-100 dark:border-gray-700 py-5">03:00</th>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                </tr>

                <tr>
                  <th className="text-center border border-gray-100 dark:border-gray-700 py-5">04:00</th>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                </tr>

                <tr>
                  <th className="text-center border border-gray-100 dark:border-gray-700 py-5">05:00</th>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="p-3 border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                  <td className="border border-gray-100 dark:border-gray-700"></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    {/* Akhir Komponen Kiri */}

    {/* Awal Komponent Kanan */}
    <div className="w-1/4">
      <div>
        
      </div>
    </div>
    {/* Akhir Komponen Kiri */}

    </>
  );
};

export default Jadwal;
