Untitled

import { useState, useEffect } from "react";
import { Accordion, AccordionBody, AccordionHeader, AccordionItem, Table } from "reactstrap";

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

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

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

  const details = qouteBuilderData?.details;
  const metrics = [
    { key: "premium", label: "Premium", format: num => num?.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") },
    { key: "adequacy", label: "Adequacy", format: value => `${value}%` },
    { key: "rateOnLine", label: "Rate on Line", format: value => `${value}%` },
    { key: "ultimateLossRatio", label: "Ultimate Loss Ratio", format: value => `${value}%` },
  ];

  return (
    <div className="accordion-custom-dropdown">
      <Accordion open={open} toggle={toggle}>
        <AccordionItem>
          <div 
            className="custom-header d-flex justify-content-between align-items-center p-3"
            onClick={() => toggle("1")} 
            style={{ cursor: 'pointer' }}
          >
            <div>IQUW Share</div>
            <div className="d-flex gap-4">
              <div>{qouteBuilderData?.iquwShare || '1,000,000'}</div>
              <div>{qouteBuilderData?.lineSize || '150,000'}</div>
            </div>
          </div>
          <AccordionBody accordionId="1" className="p-0">
            <div className="tables-container">
              {/* First Table */}
              <Table className="metrics-table mb-0" 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, format }) => (
                    <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>

              {/* Second Table - Rate on Line */}
              <Table className="rate-table mt-3" borderless>
                <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>
            </div>
          </AccordionBody>
        </AccordionItem>
      </Accordion>

      <style>
        {`
          .tables-container {
            padding: 1rem;
          }
          .metrics-table td, .rate-table td {
            padding: 0.5rem;
            height: 40px;
          }
          .rate-table {
            width: auto;
            margin-left: auto;
            max-width: 300px;
          }
          .rate-table th {
            padding: 0.5rem;
            background-color: #f8f9fa;
          }
          .accordion-custom-dropdown .accordion-body {
            padding: 0;
          }
          .model-cell {
            text-align: right;
          }
        `}
      </style>
    </div>
  );
};

export default SecuritiesSeverityComp;