import AvatarDrawing from "@/components/AvatarDrawing";
import { EssayAPIEssay } from "@/type/wwwAPI";
import { useTranslations } from "next-intl";
import Link from "next/link";
import Col from "react-bootstrap/Col";
import Row from "react-bootstrap/Row";
import Stack from "react-bootstrap/Stack";
import { getDatetime } from "taehui-lib/date";

export default function EssayTitleView({
  forumID,
  forumTitle,
  essay: { essayID, title, avatarID, avatarName, date, commentCount, hitCount },
}: {
  forumID?: string;
  forumTitle?: string;
  essay: EssayAPIEssay;
}) {
  const t = useTranslations();

  const isLoading = !(typeof forumID === "string" && essayID >= 0);

  return (
    <Row
      className="flex-nowrap"
      {...(!isLoading && {
        as: Link,
        href: `/forum/${forumID}/${essayID}`,
      })}
    >
      <Col xs="auto">
        <AvatarDrawing avatarID={avatarID} />
      </Col>
      <Col className="cc">
        <Stack gap={2}>
          <span className="ellipsis">{avatarName}</span>
          <span className="ellipsis">
            {forumTitle && `[${forumTitle}]`} {title} [{commentCount}]
          </span>
        </Stack>
      </Col>
      <Col xs="auto">
        <Stack gap={2} className="text-end">
          <span>{getDatetime(date)}</span>
          <span>{t("hitCount", { hitCount })}</span>
        </Stack>
      </Col>
    </Row>
  );
}