import { Hall } from "@/app/[language]/hall/type";
import AvatarDrawing from "@/components/AvatarDrawing";
import AvatarTitle from "@/components/AvatarTitle";
import { Col, ListGroupItem, Row } from "reactstrap";
import { useTo } from "taehui-ts/fe-utilities";

export default function AvatarItem({ avatarID, avatarName, text }: Hall) {
  const isLoading = !avatarID;

  const to = useTo();

  return (
    <ListGroupItem
      key={avatarID}
      className={isLoading ? undefined : "route"}
      onClick={
        isLoading
          ? undefined
          : () => {
              to(`/avatar/!${avatarID}`);
            }
      }
    >
      <Row className="g-0">
        <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>
  );
}