shoc-frontend-new/src/components/ui/nav-arrow-button.tsx

import type { ButtonHTMLAttributes, ReactNode } from "react";

import { cn } from "@/lib/utils";

export type NavArrowButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
  children: ReactNode;
};

export function NavArrowButton({
  children,
  className,
  disabled,
  type = "button",
  ...props
}: NavArrowButtonProps) {
  return (
    <button
      type={type}
      disabled={disabled}
      className={cn(
        "flex size-8 shrink-0 items-center justify-center rounded-md border border-border bg-card transition-colors",
        disabled
          ? "cursor-not-allowed text-border"
          : "cursor-pointer text-muted-foreground hover:bg-(--color-bg-muted) hover:text-foreground",
        className,
      )}
      {...props}
    >
      {children}
    </button>
  );
}