class FinancialTable extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        table {
          width: 100%;
          border-collapse: collapse;
        }
        th {
          text-align: left;
          padding: 0.75rem 1rem;
          font-size: 0.75rem;
          color: #6B7280;
          text-transform: uppercase;
          letter-spacing: 0.05em;
          border-bottom: 1px solid #E5E7EB;
        }
        td {
          padding: 1rem;
          border-bottom: 1px solid #E5E7EB;
          color: #4B5563;
          font-size: 0.875rem;
        }
        tr:last-child td {
          border-bottom: none;
        }
        .category {
          display: flex;
          align-items: center;
          gap: 0.75rem;
        }
        .category-icon {
          width: 36px;
          height: 36px;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .status {
          display: inline-flex;
          align-items: center;
          gap: 0.25rem;
          padding: 0.25rem 0.5rem;
          border-radius: 9999px;
          font-size: 0.75rem;
          font-weight: 500;
        }
        .status-pending {
          background-color: #FEF3C7;
          color: #92400E;
        }
        .status-approved {
          background-color: #D1FAE5;
          color: #065F46;
        }
        .status-rejected {
          background-color: #FEE2E2;
          color: #991B1B;
        }
        .actions {
          display: flex;
          gap: 0.5rem;
        }
        .action-btn {
          width: 32px;
          height: 32px;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: all 0.2s;
        }
        .action-btn:hover {
          background-color: #F3F4F6;
        }
      </style>
      <div class="overflow-x-auto">
        <table>
          <thead>
            <tr>
              <th>Category</th>
              <th>Description</th>
              <th>Amount</th>
              <th>Date</th>
              <th>Status</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <div class="category">
                  <div class="category-icon bg-blue-100 text-blue-600">
                    <i data-feather="users"></i>
                  </div>
                  <span>Salaries</span>
                </div>
              </td>
              <td>Engineering team salaries</td>
              <td>$85,000</td>
              <td>Jun 1, 2023</td>
              <td>
                <span class="status status-approved">
                  <i data-feather="check" width="12"></i>
                  Approved
                </span>
              </td>
              <td>
                <div class="actions">
                  <div class="action-btn">
                    <i data-feather="edit" width="16"></i>
                  </div>
                  <div class="action-btn">
                    <i data-feather="trash-2" width="16"></i>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="category">
                  <div class="category-icon bg-green-100 text-green-600">
                    <i data-feather="cloud"></i>
                  </div>
                  <span>Cloud Hosting</span>
                </div>
              </td>
              <td>AWS monthly invoice</td>
              <td>$8,742</td>
              <td>Jun 5, 2023</td>
              <td>
                <span class="status status-pending">
                  <i data-feather="clock" width="12"></i>
                  Pending
                </span>
              </td>
              <td>
                <div class="actions">
                  <div class="action-btn">
                    <i data-feather="edit" width="16"></i>
                  </div>
                  <div class="action-btn">
                    <i data-feather="trash-2" width="16"></i>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="category">
                  <div class="category-icon bg-indigo-100 text-indigo-600">
                    <i data-feather="package"></i>
                  </div>
                  <span>Software</span>
                </div>
              </td>
              <td>Figma Enterprise license</td>
              <td>$1,200</td>
              <td>Jun 8, 2023</td>
              <td>
                <span class="status status-approved">
                  <i data-feather="check" width="12"></i>
                  Approved
                </span>
              </td>
              <td>
                <div class="actions">
                  <div class="action-btn">
                    <i data-feather="edit" width="16"></i>
                  </div>
                  <div class="action-btn">
                    <i data-feather="trash-2" width="16"></i>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="category">
                  <div class="category-icon bg-amber-100 text-amber-600">
                    <i data-feather="briefcase"></i>
                  </div>
                  <span>Contractors</span>
                </div>
              </td>
              <td>UI/UX design services</td>
              <td>$12,500</td>
              <td>Jun 10, 2023</td>
              <td>
                <span class="status status-rejected">
                  <i data-feather="x" width="12"></i>
                  Rejected
                </span>
              </td>
              <td>
                <div class="actions">
                  <div class="action-btn">
                    <i data-feather="edit" width="16"></i>
                  </div>
                  <div class="action-btn">
                    <i data-feather="trash-2" width="16"></i>
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    `;
  }
}
customElements.define('financial-table', FinancialTable);