import { CATEGORIES, STATUSES } from "../../../config";
import {
  popupConfig,
  residentialPointConfig,
  workingPointFields,
} from "./config";
import { Col, Row } from "antd";
import { twMerge } from "tailwind-merge";

export const FeatureProperties = ({ feature, dynamicStatus }) => {
  const isResidential = feature.properties.category === CATEGORIES.residential;
  const isWorking = feature.properties.status === STATUSES.working;

  const config = isResidential ? residentialPointConfig : popupConfig;

  const finalConfig = isWorking ? [...config, ...workingPointFields] : config;

  return (
    <div>
      {finalConfig.map(({ field, name }) => {
        const value =
          dynamicStatus && field === "status"
            ? dynamicStatus
            : feature.properties[field];

        return (
          <Row className={twMerge("p-1")} key={field}>
            <Col className={"font-semibold"} span={12}>
              {name}
            </Col>
            <Col span={12}>{value}</Col>
          </Row>
        );
      })}
    </div>
  );
};
