import Image from "next/image";
import { ReactNode } from "react";
import { Col } from "reactstrap";

const AvatarTitle = ({
  avatarID,
  avatarName,
  children,
}: {
  avatarID: string;
  avatarName: string;
  children: ReactNode;
}) => {
  return (
    <>
      <Col
        className="m-1"
        xs="auto"
        onClick={(e) => {
          e.stopPropagation();
        }}
      >
        <Image
          alt=""
          src={`/www/avatar/drawing/${avatarID}`}
          className="avatar"
          width={48}
          height={48}
        />
      </Col>
      <Col className="m-1">
        <span>{avatarName}</span>
        <br />
        {children}
      </Col>
    </>
  );
};

export default AvatarTitle;