import AvatarDrawing from "@/components/AvatarDrawing";
import { GetLatestCommentAPI } from "@/type/wwwAPI";
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-ts/date";

export default function CommentTitleView({
  forumID,
  essayID,
  comment: { commentID, avatarID, avatarName, date, text },
}: {
  forumID?: string;
  essayID?: number;
  comment: GetLatestCommentAPI[number];
}) {
  const isLoading = !(
    typeof forumID === "string" &&
    commentID >= 0 &&
    typeof essayID === "number"
  );

  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">{text}</span>
        </Stack>
      </Col>
      <Col xs="auto" suppressHydrationWarning>
        {getDatetime(date)}
      </Col>
    </Row>
  );
}