import { Component, JSX, splitProps } from "solid-js";
import materialStyles from "./material.module.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 classes = () =>
    managed.class
      ? [materialStyles.button, managed.class].join(" ")
      : materialStyles.button;
  const type = () => managed.type ?? "button";
  return <button type={type()} class={classes()} {...passthough}></button>;
};

export default Button;