import { List, Icon } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import CardTemplate from "./job-detail-cards.template.component";
import styled from "styled-components";

const Container = styled.div`
  height: 100%;
  overflow-y: auto;
`;

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

  return (
    <CardTemplate 
      loading={loading}
      title={t("jobs.labels.cards.notes")}
      extraLink={`/manage/jobs/${data.id}#notes`}>
      {data ? (
        <Container>
          <List
            size='small'
            bordered
            dataSource={data.notes}
            renderItem={item => (
              <List.Item>
                {item.critical ? (
                  <Icon style={{ margin: 4, color: "red" }} type='warning' />
                ) : null}
                {item.private ? (
                  <Icon style={{ margin: 4 }} type='eye-invisible' />
                ) : null}
                {item.text}
              </List.Item>
            )}
          />
        </Container>
      ) : null}
    </CardTemplate>
  );
}
