import { ComprehensiveProps } from "../../DomainProps";
import ButtonView from "./ButtonView";

interface ButtonProps extends ComprehensiveProps {
  icon?: string;
  iconClass?: string;
  imageUrl?: string;
  defaultImageUrl: string;
  imageAlt?: string;
  togglable: boolean;
  title?: string;
  fillMode: "solid" | "link" | "outline" | "flat";
  role: "button" | "icon" | "image";
  type: "button" | "submit" | "reset";
}

const Button: React.FC<ButtonProps> = (props) => {
  const onBlur = (e: any) => {
    if (props.onBlur) props.onBlur(null);
  };
  const onClick = (e: any) => {
    if (props.onClick) props.onClick(null);
  };
  
  // Extract rootStyle to prevent passing it down to DOM element
  const { rootStyle, ...buttonViewProps } = props;
  
  return (
    <section
      id={rootStyle?.id}
      className={rootStyle?.className}
      style={rootStyle?.inline}
    >
      <ButtonView
        {...buttonViewProps}
        onClick={onClick}
        onBlur={onBlur}
      />
    </section>
  );  
};

export default Button;