import { Col, ListGroupItem, Row } from "reactstrap";
import { sprintf } from "sprintf-js";
import { useTranslation } from "react-i18next";
import { useTo } from "taehui-ts/fe-utility";
import { getDatetime } from "taehui-ts/date";

import AvatarTitle from "src/taehui/AvatarTitle";
import { EssayAPIEssay } from "src/wwwAPI";

const EssayTitleView = ({
  forumID,
  forumTitle,
  essay: { essayID, title, avatarID, avatarName, date, commentCount, hitCount },
}: {
  forumID?: string;
  forumTitle?: string;
  essay: EssayAPIEssay;
}) => {
  const { t } = useTranslation();
  const to = useTo();

  return (
    <ListGroupItem
      className="route"
      onClick={() => {
        to(`/forum/${forumID}/${essayID}`);
      }}
    >
      <Row className="g-0">
        <AvatarTitle avatarID={avatarID} avatarName={avatarName}>
          <span>
            {forumTitle && `[${forumTitle}]`} {title} [{commentCount}]
          </span>
        </AvatarTitle>
        <Col className="m-1 text-end" xs="auto">
          <span>{getDatetime(date)}</span>
          <br />
          <span>{sprintf(t("hitCount"), hitCount)}</span>
        </Col>
      </Row>
    </ListGroupItem>
  );
};

export default EssayTitleView;
