Untitled

const SecuritiesSeverityComp = ({ header, security }) => {
  const [open, setOpen] = useState("");
  console.log("open", open);

  const formatNumber = (num) => {
    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  };

  const formatPercentage = (value) => `${value}%`;

  const metrics = [
    { key: "premium", label: "Premium", format: formatNumber },
    { key: "adequacy", label: "Adequacy", format: formatPercentage },
    { key: "rateOnLine", label: "Rate on Line", format: formatPercentage },
    {
      key: "ultimateLossRatio",
      label: "Ultimate Loss Ratio",
      format: formatPercentage,
    },
  ];

  const toggle = (id) => {
    setOpen((prevOpen) => (prevOpen === id ? "" : id));
  };

  const details = qouteBuilderData[0].details;

  return (
    <div className="accordin-custom-dropdown">
      <Accordion open={open} toggle={toggle}>
        <AccordionItem>
          <AccordionHeader targetId="1">{header}</AccordionHeader>
          <AccordionBody accordionId="1">
            <table>
              <thead>
                <tr>
                  <th></th>
                  <th>Modelled</th>
                  <th></th>
                  <th>Benchmark</th>
                  <th></th>
                </tr>
                <tr>
                  <th></th>
                  <th>Unadjusted</th>
                  <th>Adjusted</th>
                  <th>Unadjusted</th>
                  <th>Adjusted</th>
                </tr>
              </thead>
              <tbody>
                {metrics.map(({ key, label, format }) => (
                  <tr key={key}>
                    <td>{label}</td>
                    <td>{details.modelled.unadjusted[key]}</td>
                    <td>{details.modelled.adjusted[key]}</td>
                    <td>{details.benchmark.unadjusted[key]}</td>
                    <td>{details.benchmark.adjusted[key]}</td>
                    {/* <td>{item.percentile}%</td>
                    <td>{item.severity.toLocaleString()}</td> */}
                  </tr>
                ))}
              </tbody>
            </table>
          </AccordionBody>
        </AccordionItem>
      </Accordion>
    </div>
  );
};