Untitled

import { useState, useEffect } from "react";
import {
  Accordion,
  AccordionBody,
  AccordionItem,
  Table,
} from "reactstrap";
import "./Accordion.css"

const QuoteDetailsAccordion = ({ qouteBuilderData, initialOpenState }) => {
  const [open, setOpen] = useState("");

  useEffect(() => {
    if (initialOpenState) {
      setOpen("1");
    }
  }, [initialOpenState]);

  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 details = qouteBuilderData?.details;

  return (
    <div className="">
      <Accordion open={open}>
        <AccordionItem>

          <AccordionBody className="accordion-body" accordionId="1">

            <Table className="metrics-table" borderless>
              <thead>
                <tr className="table-header-row">
                  <th className="model-header"></th>
                  <th colSpan="2" className="model-header">
                    Modelled
                  </th>
                  <th colSpan="2" className="model-header">
                    Benchmark
                  </th>
                </tr>
                <tr>
                  <th className="subheader"></th>
                  <th className="subheader">Unadjusted</th>
                  <th className="subheader">Adjusted</th>
                  <th className="subheader">Unadjusted</th>
                  <th className="subheader">Adjusted</th>
                </tr>
              </thead>
              <tbody>
                {metrics.map(({ key, label }) => (
                  <tr key={key}>
                    <td className="accordion-label">{label}</td>
                    <td className="model-cell">
                      {details?.modelled?.unadjusted[key]}
                    </td>
                    <td className="model-cell">
                      {details?.modelled?.adjusted[key]}
                    </td>
                    <td className="model-cell">
                      {details?.benchmark?.unadjusted[key]}
                    </td>
                    <td className="model-cell">
                      {details?.benchmark?.adjusted[key]}
                    </td>
                  </tr>
                ))}
              </tbody>
            </Table>

            <Table className="rate-table" >
              <thead>
                <tr>
                  <th colSpan="2" className="bg-light">
                    Rate on Line
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Technical Rate on Line</td>
                  <td className="text-end">83%</td>
                </tr>
                <tr>
                  <td>Quoted Rate on Line</td>
                  <td className="text-end">78%</td>
                </tr>
              </tbody>
            </Table>
       
          </AccordionBody>
        </AccordionItem>
      </Accordion>
    </div>
  );
};

export default QuoteDetailsAccordion;


.metrics-table {
  width: 70%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--radius-1, 8px);
  border: 1px solid var(--Colours-Border-border-primary, #e6e7e7);
}
.rate-table{
    width: 30%;
    border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--radius-1, 8px);
  border: 1px solid var(--Colours-Border-border-primary, #e6e7e7);
   
}
.accordion-body{
    display: flex;
    width: 100%;
    gap: 10px;
}
.metrics-table th {
  padding: 8px;
  border-bottom: 1px solid #dee2e6;
}

.subheader-row {
    border: 1px solid  #dee2e6 !important;
}
.subheader{
    font-size: 14px;
    letter-spacing: 0px;
    line-height: 20px;
    text-align: right;
    
}

.model-header {
  background-color: #e3f4f0 !important;
  border: none !important;
  color: #004c45 !important;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0px;
  text-align: center;
}

.model-cell {
  text-align: right;
  padding: 8px;
}

.accordion-label{
    font-size: 14px;
    font-weight: 600;
}