import {
  h, c, Component, useProp,
} from "atomico";
import { Option } from "funfix";
import style from "./kun-series-member.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";

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

  return (
    <host>
      <style>{style}</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-4">
          {userNameChecked}
        </div>
      </div>
    </host>
  );
};

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

export default getComponentOrDefine("kun-series-member", KunSeriesMember);
