import {
  h, useProp, Component,
} from "atomico";
import style from "./kun-image-or-default.scss";
import "../kun-icon/kun-icon";
import "../kun-image/kun-image";
import { getComponentOrDefine } from "../../hooks/aync-hook/redirect";

const KunImageOrDefault = () => {
  const [url] = useProp<string>("url");
  const [height] = useProp<number>("height");
  const [width] = useProp<number>("width");

  return (
    <host>
      <style>{style}</style>
      {url != null && (
        <kun-image url={url} width={width} height={height} />
      )}
      {url == null && (
        <kun-icon iconType="logo" iconWidth={width} iconHeight={height} />
      )}
    </host>
  );
};

KunImageOrDefault.props = {
  height: {
    type: Number,
  },
  cls: {
    type: String,
    value: "",
  },
  width: {
    type: Number,
  },
  url: {
    type: String,
    reflect: true,
  },
};

export default getComponentOrDefine("kun-image-or-default", KunImageOrDefault);
