import { Show, type JSX } from "solid-js";

export interface DockItem {
  id: string;
  label: string;
  icon: JSX.Element;
  href?: string;
  onClick?: () => void;
  variant?: "default" | "danger";
}

export interface FloatingDockProps {
  menuItems: DockItem[];
  bottomActions?: DockItem[];
  activeId?: string;
  className?: string;
}

export function FloatingDock(props: FloatingDockProps) {
  return (
    <div class={`flex flex-col overflow-hidden rounded-3xl bg-canvas border border-border shadow-xl ${props.className ?? ""}`}>
      {/* Menu items */}
      <div class="flex-1 overflow-y-auto p-4 pb-2">
        <div class="flex flex-col gap-0.5">
          {props.menuItems.map((item) => {
            const content = (
              <div
                class={`flex h-10 cursor-pointer items-center justify-between gap-2 rounded-xl px-2 text-sm font-medium transition-colors ${
                  item.variant === "danger"
                    ? "text-error hover:bg-error-subtle"
                    : "text-ink hover:bg-canvas-subtle"
                } ${props.activeId === item.id ? "bg-canvas-subtle" : ""}`}
                onClick={item.onClick}
              >
                <div class="flex items-center gap-2">
                  <span class="text-ink-muted">{item.icon}</span>
                  <span class="capitalize">{item.label}</span>
                </div>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-ink-subtle">
                  <path d="m9 18 6-6-6-6"/>
                </svg>
              </div>
            );

            if (item.href) {
              return (
                <a href={item.href} class="block">
                  {content}
                </a>
              );
            }
            return content;
          })}
        </div>
      </div>

      {/* Bottom action bar */}
      <Show when={props.bottomActions && props.bottomActions.length > 0}>
        <div class="shrink-0 border-t border-border/60 p-2">
          <div class="flex h-9 w-full items-center justify-center gap-1">
            {props.bottomActions!.map((action) => (
              <button
                onClick={action.onClick}
                class={`flex h-full cursor-pointer items-center rounded-2xl text-sm font-medium transition-colors duration-300 text-ink-subtle hover:bg-canvas-subtle hover:text-ink px-2 ${
                  props.activeId === action.id ? "bg-ink/[0.04] text-ink" : ""
                }`}
                aria-label={action.label}
              >
                <span class="size-4">{action.icon}</span>
                {props.activeId === action.id && (
                  <span class="ml-1.5 overflow-hidden whitespace-nowrap font-medium tracking-tight text-xs">
                    {action.label}
                  </span>
                )}
              </button>
            ))}
          </div>
        </div>
      </Show>
    </div>
  );
}

