import { Descriptions, Skeleton } from "antd";
import React from "react";
import CurrencyFormatterAtom from "../../atoms/currency-formatter/currency-formatter.atom";
import ErrorResultAtom from "../../atoms/error-result/error-result.atom";

export default function JobsDetailDescriptionMolecule({ loading, job }) {
  if (loading) return <Skeleton active />;

  if (!job) return <ErrorResultAtom title="Error displaying job data." />;

  return (
    <div>
      <Descriptions
        title={`${job.clm_no}${job.ins_co_nm ? ` | ${job.ins_co_nm}` : ""}`}
        bordered
        layout="vertical"
        column={{ xxl: 5, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }}
      >
        <Descriptions.Item label="Claim No.">{job.clm_no}</Descriptions.Item>
        <Descriptions.Item label="Ins Co. Nm.">
          {job.ins_co_nm}
        </Descriptions.Item>
        <Descriptions.Item label="Owner">{`${job.ownr_fn} ${job.ownr_ln}`}</Descriptions.Item>
        <Descriptions.Item label="Vehicle">{`${job.v_model_yr} ${job.v_makedesc} ${job.v_model}`}</Descriptions.Item>
        <Descriptions.Item label="Claim Total">
          <CurrencyFormatterAtom>{job.clm_total}</CurrencyFormatterAtom>
        </Descriptions.Item>
        <Descriptions.Item label="Group">{job.group}</Descriptions.Item>
        <Descriptions.Item label="Age">{job.v_age}</Descriptions.Item>
      </Descriptions>
    </div>
  );
}
