import { Col, ListGroupItem, Row } from "reactstrap";
import { useTo } from "taehui-ts/fe-utility";

import { HOF } from "src/hof/HOF";
import AvatarDrawing from "src/AvatarDrawing";
import AvatarTitle from "src/AvatarTitle";

export default function AvatarItem({ avatarID, avatarName, text }: HOF) {
  const to = useTo();

  return (
    <ListGroupItem key={avatarID}>
      <Row
        className="g-0 route"
        onClick={() => {
          to(`/qwilight/avatar/${encodeURIComponent("#")}${avatarID}`);
        }}
      >
        <Col className="m-1" xs="auto">
          <AvatarDrawing avatarID={avatarID} />
        </Col>
        <Col className="m-1" xs="auto">
          {avatarID && <AvatarTitle avatarID={avatarID} />}
          <span>{avatarName}</span>
          <br />
          <span>{text}</span>
        </Col>
      </Row>
    </ListGroupItem>
  );
}