"use client";
import { useState } from "react";
import {
  Label,
  Listbox,
  ListboxButton,
  ListboxOption,
  ListboxOptions,
} from "@headlessui/react";

const orderStatus = [
  { id: 1, title: "All orders" },
  { id: 2, title: "Buy Again" },
  { id: 3, title: "Not Delivered" },
  { id: 4, title: "Cancelled" },
  { id: 5, title: "Return" },
];

export default function ListDetail({ id, label }:any) {
  const [selected, setSelected] = useState(orderStatus[0]);

  return (
    <div className="flex shrink-0">
      <div className="mt-4">
        <Listbox value={selected} onChange={setSelected}>
          <Label htmlFor={id} className="text-s font-medium">
            {label}
          </Label>
          <div className="relative mt-1">
            <ListboxButton className="grid w-full min-w-[200px] cursor-default grid-cols-1 rounded-md bg-white px-3 py-2 text-left text-gray-950 outline-0">
              <span className="col-start-1 row-start-1 truncate pr-6 font-medium">
                {selected.title}
              </span>
              <i
                aria-hidden="true"
                className="icon-[lucide--chevrons-up-down] col-start-1 row-start-1 size-5 self-center justify-self-end text-gray-500 sm:size-4"
              ></i>
            </ListboxButton>

            <ListboxOptions
              transition
              className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base ring-1 shadow-lg ring-black/5 focus:outline-hidden data-leave:transition data-leave:duration-100 data-leave:ease-in data-closed:data-leave:opacity-0 sm:text-sm"
            >
              {orderStatus.map((items) => (
                <ListboxOption
                  key={items.id}
                  value={items}
                  className="group relative cursor-default py-2 pr-9 pl-3 text-gray-900 select-none data-focus:bg-gray-950 data-focus:text-white data-focus:outline-hidden"
                >
                  <span className="block truncate font-normal group-data-selected:font-medium">
                    {items.title}
                  </span>

                  <span className="absolute inset-y-0 right-0 flex items-center pr-4 text-indigo-600 group-not-data-selected:hidden group-data-focus:text-white">
                    <i
                      aria-hidden="true"
                      className="icon-[material-symbols--check-rounded]"
                    ></i>
                  </span>
                </ListboxOption>
              ))}
            </ListboxOptions>
          </div>
        </Listbox>
      </div>
    </div>
  );
}