import {
  h, Component, useProp,
} from "atomico";
import { Option } from "funfix";
import style from "./kun-author-card.scss";

import "../kun-image-or-default/kun-image-or-default";
import { getComponentOrDefine } from "../../hooks/aync-hook/redirect";
import { getKunImageUrl } from "../kun-chat-message/kun-chat-message";
import { mockStyle } from "../../common/mock-style";

const Comp: Component = () => {
  const [userName] = useProp<string>("userName");
  const [userAvatar] = useProp<string>("userAvatar");
  const [description] = useProp<string>("description");
  const userNameChecked = Option.of(userName).getOrElse("用户");

  return (
    <host>
      <style>{mockStyle}</style>
      <div class="flex justify-start my-4 items-center">
        <kun-image-or-default class="mr-4" url={getKunImageUrl(userAvatar)} width={65} height={65} />
        <div class="flex flex-col justify-start self-start mt-1">
          <div>
            {userNameChecked}
          </div>
          <div class="text-sm">
            {description}
          </div>
        </div>
      </div>
    </host>
  );
};

Comp.props = {
  userName: {
    type: String,
  },
  userAvatar: {
    type: String,
  },
  description: {
    type: String,
  },
};

export default getComponentOrDefine("kun-author-card", Comp);
