JustButton

import React from 'react';

interface CustomButtonProps {
  children?: React.ReactNode;
  onClick?: () => void;
  disabled?: boolean;
  className?: string;
}

export function CustomButton({ 
  children = "Button", 
  onClick, 
  disabled = false, 
  className = "" 
}: CustomButtonProps) {
  const baseStyles = {
    "padding": "8px 16px",
    "borderRadius": "6px",
    "fontSize": "14px",
    "fontWeight": "500",
    "color": "#ffffff",
    "cursor": "pointer",
    "opacity": "1",
    "transition": "all 150ms ease-in-out 0ms",
    "backgroundColor": "#3b82f6",
    "border": "none",
    "boxShadow": "0 1px 2px 0 rgba(0, 0, 0, 0.05)"
};
  
  const hoverStyles = {
    "padding": "8px 16px",
    "borderRadius": "6px",
    "fontSize": "14px",
    "fontWeight": "500",
    "color": "#ffffff",
    "cursor": "pointer",
    "opacity": "1",
    "transition": "all 150ms ease-in-out 0ms",
    "backgroundColor": "#2563eb",
    "border": "none",
    "boxShadow": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
    "borderColor": "#2563eb"
};

  const handleMouseEnter = (e: React.MouseEvent<HTMLButtonElement>) => {
    Object.assign(e.currentTarget.style, hoverStyles);
  };

  const handleMouseLeave = (e: React.MouseEvent<HTMLButtonElement>) => {
    Object.assign(e.currentTarget.style, baseStyles);
  };

  return (
    <button
      className={`inline-flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-offset-2 py-2 px-4 text-sm font-[500] rounded border-0 bg-[#3b82f6] text-[#ffffff] shadow-sm duration-[150ms] ease-[ease-in-out] cursor-pointer hover:bg-[#2563eb] hover:text-[#ffffff] hover:border-[#2563eb] hover:[transform:none] ${className}`}
      style={baseStyles}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
      onClick={onClick}
      disabled={disabled}
    >
      {children}
    </button>
  );
}

// Usage:
// <CustomButton onClick={() => console.log('Clicked!')}>
//   Button
// </CustomButton>