export function Button({ children, variant = "primary", ...props }) {
  const baseStyles = "px-4 py-2 rounded-md font-medium transition-colors";

  const variants = {
    primary: "bg-blue-500 text-white hover:bg-blue-600 disabled:bg-blue-300",
    destructive: "bg-red-500 text-white hover:bg-red-600 disabled:bg-red-300",
  };

  return (
    <button className={`${baseStyles} ${variants[variant]}`} {...props}>
      {children}
    </button>
  );
}