import React from "react";
import { clsx as cn } from "clsx";

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  children: React.ReactNode;
  variant?: "link" | "primary" | "secondary" | "tertiary";
  className?: string;
  size?: "small" | "medium" | "large";
  onlyIcon?: boolean;
  active?: boolean;
}

function SidebarButton({ children, className, active, ...props }: ButtonProps) {
  return (
    <button
      {...props}
      className={cn(
        "transition-all flex items-center gap-[0.833vw] px-[1.111vw] py-[0.833vw] text-[0.972vw] rounded-[0.556vw] hover:bg-[#7B60F3]/10 leading-[115%] font-medium tracking-tight w-full",
        active ? "bg-[#7B60F3]/10 text-[#7B60F3]" : "text-[#242424]",
        className
      )}
    >
      {children}
    </button>
  );
}

export default SidebarButton;
