import { Component, JSX, splitProps } from "solid-js";
import materialStyles from "./material.module.css";
import "./typography.css";

/**
 * Material-styled button.
 *
 * @param type Same as `<button>`'s type property, the default is 'button'
 */
const Button: Component<JSX.ButtonHTMLAttributes<HTMLButtonElement>> = (
  props,
) => {
  const [managed, passthough] = splitProps(props, ["class", "type"]);
  const type = () => managed.type ?? "button";

  return (
    <button
      type={type()}
      class={`${materialStyles.button} buttonText ${managed.class || ""}`}
      {...passthough}
    ></button>
  );
};

export default Button;