Untitled

import React, { useState } from 'react';
import {
  Accordion,
  AccordionItem,
  AccordionHeader,
  AccordionBody,
  Table
} from 'reactstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

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

  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="accordion-custom-dropdown">
      <style>
        {`
          .accordion {
            --bs-accordion-border-color: transparent;
          }
          
          .model-header {
            background-color: #f0f9f6 !important;
            font-weight: 500;
          }
          
          .benchmark-header {
            background-color: #f0f7fa !important;
            font-weight: 500;
          }
          
          .model-cell {
            background-color: #f0f9f6 !important;
            text-align: center;
            padding: 8px;
          }
          
          .benchmark-cell {
            background-color: #f0f7fa !important;
            text-align: center;
            padding: 8px;
          }
          
          .metrics-table {
            margin-top: 1rem;
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
          }
          
          .metrics-table th {
            padding: 8px;
            text-align: center;
            border-bottom: 1px solid #dee2e6;
          }
          
          .metrics-table td:first-child {
            font-weight: 500;
            padding: 8px;
            text-align: left;
          }
          
          .table-header-row th:first-child {
            text-align: left;
          }
          
          .accordion-button:not(.collapsed) {
            background-color: transparent;
            box-shadow: none;
          }
          
          .accordion-button:focus {
            box-shadow: none;
            border-color: transparent;
          }
        `}
      </style>
      
      <Accordion open={open} toggle={toggle}>
        <AccordionItem>
          <AccordionHeader targetId="1">
            {header}
          </AccordionHeader>
          <AccordionBody accordionId="1">
            <Table className="metrics-table" borderless>
              <thead>
                <tr className="table-header-row">
                  <th></th>
                  <th colSpan="2" className="model-header">Modelled</th>
                  <th colSpan="2" className="benchmark-header">Benchmark</th>
                </tr>
                <tr>
                  <th></th>
                  <th className="model-header">Unadjusted</th>
                  <th className="model-header">Adjusted</th>
                  <th className="benchmark-header">Unadjusted</th>
                  <th className="benchmark-header">Adjusted</th>
                </tr>
              </thead>
              <tbody>
                {metrics.map(({ key, label, format }) => (
                  <tr key={key}>
                    <td>{label}</td>
                    <td className="model-cell">
                      {format(details.modelled.unadjusted[key])}
                    </td>
                    <td className="model-cell">
                      {format(details.modelled.adjusted[key])}
                    </td>
                    <td className="benchmark-cell">
                      {format(details.benchmark.unadjusted[key])}
                    </td>
                    <td className="benchmark-cell">
                      {format(details.benchmark.adjusted[key])}
                    </td>
                  </tr>
                ))}
              </tbody>
            </Table>
          </AccordionBody>
        </AccordionItem>
      </Accordion>
    </div>
  );
};

export default SecuritiesSeverityComp;