import { Carousel } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import "./job-detail-cards.styles.scss";
import CardTemplate from "./job-detail-cards.template.component";

export default function JobDetailCardsDocumentsComponent({ loading, data }) {
  const { t } = useTranslation();

  if (!data)
    return (
      <CardTemplate loading={loading} title={t("jobs.labels.cards.documents")}>
        null
      </CardTemplate>
    );

  return (
    <CardTemplate
      loading={loading}
      title={t("jobs.labels.cards.documents")}
      extraLink={`/manage/jobs/${data.id}#documents`}
    >
      {data.documents.length > 0 ? (
        <Carousel autoplay>
          {data.documents.map(item => (
            <img key={item.id} src={item.thumb_url} alt={item.name} />
          ))}
        </Carousel>
      ) : (
        <div>{t("documents.errors.nodocuments")}</div>
      )}
    </CardTemplate>
  );
}
