"use client";

import { forwardRef, type ComponentPropsWithoutRef, type ReactNode } from "react";
import Link, { type LinkProps } from "next/link";

const miniClasses = [
  "relative z-10 rounded-lg border border-lightline bg-lightbg p-2 shadow-md dark:border-darkline dark:bg-darkbg",
  "text-lighttext dark:text-darktext text-sm",
  "hover:border-lightline-hover hover:text-trptkblue dark:hover:border-darkline-hover dark:hover:text-white",
  "transition-all duration-200 ease-in-out",
  "disabled:pointer-events-none disabled:opacity-50",
];

export const iconButtonMiniClass = miniClasses.join(" ");

type IconButtonMiniProps = ComponentPropsWithoutRef<"button"> & {
  children: ReactNode;
};

export const IconButtonMini = forwardRef<HTMLButtonElement, IconButtonMiniProps>(
  function IconButtonMini({ children, className, ...props }, ref) {
    return (
      <button
        ref={ref}
        type="button"
        className={[...miniClasses, className].filter(Boolean).join(" ")}
        {...props}
      >
        {children}
      </button>
    );
  },
);

type IconButtonMiniLinkProps = Omit<ComponentPropsWithoutRef<"a">, keyof LinkProps> &
  LinkProps & {
    children: ReactNode;
  };

export function IconButtonMiniLink({ children, className, ...props }: IconButtonMiniLinkProps) {
  return (
    <Link className={[...miniClasses, className].filter(Boolean).join(" ")} {...props}>
      {children}
    </Link>
  );
}