import { List } from "antd";
import {
  WarningFilled,
  EyeInvisibleFilled,
  AuditOutlined,
} from "@ant-design/icons";
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}?tab=notes`}
    >
      {data ? (
        <Container>
          <List
            bordered
            dataSource={data.notes}
            renderItem={(item) => (
              <List.Item style={{ whiteSpace: "pre-line" }}>
                {item.critical ? (
                  <EyeInvisibleFilled style={{ margin: 4, color: "red" }} />
                ) : null}
                {item.private ? <WarningFilled style={{ margin: 4 }} /> : null}
                {item.audit ? <AuditOutlined style={{ margin: 4 }} /> : null}
                {item.text}
              </List.Item>
            )}
          />
        </Container>
      ) : null}
    </CardTemplate>
  );
}