import { Component, h } from "atomico";
import { getComponentOrDefine } from "../../hooks/aync-hook/redirect";

const style = `
  .horse-button {
    cursor: pointer;
    outline: none;
    padding: 0 39px;
    font-size: 18px;
    border: none;
    line-height: 40px;
    color: white;
    height:40px;
    background:rgba(255,157,3,1);
  }
.horse-button:hover {
  opacity: 0.7;
}

.horse-small.horse-button {
  height: 35px;
  font-size: 16px;
  line-height: 35px;
  padding: 0 15px;
}

.horse-button {
  cursor: pointer;
  outline: none;
  padding: 0 39px;
  font-size: 18px;
  border: none;
  line-height: 40px;
  color: white;
  height: 40px;
  background: rgba(255, 157, 3, 1);
}

.button-pure {
  background: rgba(255, 255, 255, 1);
  border-radius: 5px;
  border: 1px solid rgba(233, 233, 233, 1);
  color: rgba(156, 156, 156, 1);
}

.button-outline {
  background: rgba(255, 255, 255, 1);
  border-radius: 18px;
  border: 1px solid rgba(255, 167, 47, 1);
  color: rgba(232, 139, 13, 1);
}
`;

const HorseButtonHook: Component = (props: {
    small: boolean; content: string;
    htmlType: string; theme: string;
    onDownload: () => void;
}) => (
  <host>
    <section className="button-item" styleSheet={style}>
      <style>{style}</style>
      <button
        onclick={props.onDownload}
        type={props.htmlType ? props.htmlType : "button"}
        className={`button-${props.theme ? props.theme : "button-primary"}  horse-button ${props.small ? "horse-small" : "horse-normal"}`}
      >
        {props.content}
      </button>
    </section>
  </host>
);

HorseButtonHook.props = {
  small: {
    type: Boolean,
    reflect: true,
  },
  content: {
    type: String,
    reflect: true,
  },
};

export default getComponentOrDefine("horse-button-hook", HorseButtonHook);

export { HorseButtonHook };
