"use client";

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

const baseClasses = [
  "relative z-10 rounded-xl border border-lightline bg-lightbg p-4 shadow-lg dark:border-darkline dark:bg-darkbg",
  "text-lighttext dark:text-darktext text-lg",
  "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 iconButtonClass = baseClasses.join(" ");

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

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

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

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