import Link from "next/link";
import React from "react";
// buzzwareTech imports
import type { ISvgIcons } from "@buzzwaretech/propel/icons";
import { cn } from "@buzzwaretech/utils";
import type { LucideIcon } from "lucide-react";

type Props = {
  isActive: boolean;
  label: string;
} & ({ as: "button"; onClick: () => void } | { as: "link"; href: string }) &
  (
    | {
        icon: LucideIcon | React.FC<ISvgIcons>;
      }
    | { iconNode: React.ReactElement }
  );

export function SettingsSidebarItem(props: Props) {
  const { as, isActive, label } = props;
  // common class
  const className = cn(
    "flex items-center gap-2 rounded-lg px-2 py-1.5 text-left text-body-sm-medium text-secondary transition-colors",
    {
      "bg-layer-transparent-selected text-primary": isActive,
      "hover:bg-layer-transparent-hover": !isActive,
    },
  );
  // common content
  const content = (
    <>
      {"icon" in props ? (
        <span className="grid size-4 shrink-0 place-items-center">
          {<props.icon className="size-3.5" />}
        </span>
      ) : (
        props.iconNode
      )}
      <span className="truncate">{label}</span>
    </>
  );

  if (as === "button") {
    return (
      <button type="button" className={className} onClick={props.onClick}>
        {content}
      </button>
    );
  }

  return (
    <Link className={className} href={props.href}>
      {content}
    </Link>
  );
}