import * as React from "react";
import { useTranslation } from "react-i18next";
import Share from "~/models/Share";
import ListItem from "~/components/List/Item";
import Time from "~/components/Time";
import ShareMenu from "~/menus/ShareMenu";

type Props = {
  share: Share;
};

const ShareListItem = ({ share }: Props) => {
  const { t } = useTranslation();
  const { lastAccessedAt } = share;

  return (
    <ListItem
      title={share.documentTitle}
      subtitle={
        <>
          {t("Shared")} <Time dateTime={share.createdAt} addSuffix />{" "}
          {t("by {{ name }}", {
            name: share.createdBy.name,
          })}{" "}
          {lastAccessedAt && (
            <>
              {" "}
              &middot; {t("Last accessed")}{" "}
              <Time dateTime={lastAccessedAt} addSuffix />
            </>
          )}
        </>
      }
      actions={<ShareMenu share={share} />}
    />
  );
};

export default ShareListItem;