import clsx from "clsx";
import { IServer } from "../types/IServer";
import LightningIcon from "./icons/LightningIcon";

interface TableSelectorProps {
  tables: IServer[];
  selectedTable: IServer | null;
  onSelect: (table: IServer) => void;
}

function TableSelector({
  tables,
  selectedTable,
  onSelect,
}: TableSelectorProps) {
  return (
    <div className="flex gap-[0.556vw] overflow-x-auto -mx-[1.111vw] pl-[1.111vw] [scrollbar-width:none]">
      {tables.map((table) => (
        <button
          key={table.id}
          disabled={table.status === "offline"}
          onClick={(e) => {
            e.preventDefault();
            onSelect(table);
          }}
          className={clsx(
            "rounded-[0.833vw] outline-none p-[1.111vw] space-y-[0.278vw] disabled:text-[#D6D6D6] enabled:cursor-pointer disabled:!cursor-not-allowed enabled:hover:bg-[#F0F0F0] transition-colors shrink-0",
            selectedTable?.id === table.id && "bg-[#F6F6F6]"
          )}
        >
          <p className="button-m font-medium text-left">{table.name}</p>
          {table.status === "offline" ? (
            <p className="text-[#D6D6D6] font-medium caption-s text-left">
              Недоступен
            </p>
          ) : table.sessions &&
            table.sessions.length > 0 &&
            table.sessions[0].status !== "ended" ? (
            <div className="flex gap-[0.139vw] items-center">
              <span className="size-[0.883vw] text-[#7B60F3]">
                <LightningIcon />
              </span>
              <p className="caption-s text-[#7B60F3] font-medium">Идет сеанс</p>
            </div>
          ) : (
            <p className="text-[#29AF61] caption-s font-medium">Свободен</p>
          )}
        </button>
      ))}
    </div>
  );
}

export default TableSelector;