import { Col, Row } from "reactstrap";
import { useTranslation } from "react-i18next";
import { getDatetime } from "taehui-ts/date";

import { LatestAvatarViewLoading } from "src/Loading";
import AvatarTitle from "src/AvatarTitle";
import useGetLatestAvatar from "src/taehui/useGetLatestAvatar";

const LatestAvatarsView = () => {
  const { t } = useTranslation();

  const { data: latestAvatar, isFetched: isLatestAvatarLoaded } =
    useGetLatestAvatar();

  return (
    <Row className="g-0">
      {latestAvatar.map((latestAvatar, i) => {
        return (
          <Col className="m-1" key={i}>
            <h5>{t(`latestAvatarsView${i}`)}</h5>
            {isLatestAvatarLoaded ? (
              latestAvatar.map(({ avatarID, avatarName, date }) => {
                return (
                  <Row className="g-0" key={avatarID}>
                    <AvatarTitle avatarID={avatarID} avatarName={avatarName}>
                      <span>{getDatetime(date)}</span>
                    </AvatarTitle>
                  </Row>
                );
              })
            ) : (
              <LatestAvatarViewLoading />
            )}
          </Col>
        );
      })}
    </Row>
  );
};

export default LatestAvatarsView;
