import { Accordion } from "@mantine/core";
import { IconPlus } from "@tabler/icons-react";
import classes from "./index.module.css";

const AdditionalData: React.FC<{ additionData: Record<string, unknown> }> = ({
  additionData,
}) => {
  const data = Object.entries(additionData);
  const items = data
    .filter((obj) => `${obj[1]}`.length > 0)
    .map((item, id) => (
      <Accordion.Item
        key={id}
        value={`${item[1]}`}
        style={{
          borderTop: "1px solid var(--mantine-color-white-1)",
        }}
        mt={16}
      >
        <Accordion.Control tt={"capitalize"}>
          {item[0].replaceAll("_", " ").toLowerCase()}
        </Accordion.Control>
        <Accordion.Panel fz={12} c={"dark.10"}>{`${item[1]}`}</Accordion.Panel>
      </Accordion.Item>
    ));

  return (
    <Accordion
      classNames={{ chevron: classes.chevron }}
      chevron={<IconPlus className={classes.icon} />}
    >
      {items}
    </Accordion>
  );
};

export default AdditionalData;