<div className="text-center py-4">
        <div className="spinner-border" role="status">
          <span className="visually-hidden">Loading...</span>
        </div>
        <p className="mt-2">Loading menu items...</p>
      </div>
      <div className="alert alert-danger">
        <h5>Error Loading Menu Items</h5>
        <p>An error occurred while loading menu items.</p>
      </div>
      <div className="text-center py-5">
        <i className="bi bi-basket text-muted" style={{ fontSize: "3rem" }}></i>
        <h4 className="mt-3 text-muted">No Menu Items</h4>
        <p className="text-muted">Start by adding your first menu item.</p>
      </div>
      <div className="table-responsive">
        <table className="table table-hover">
          <thead className="table-dark">
            <tr>
              <th>Image</th>
              <th>Name</th>
              <th>Category</th>
              <th>Price</th>
              <th>Special Tag</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <img
                  src="https://placehold.co/600x400"
                  className="rounded"
                  style={{
                    width: "50px",
                    height: "50px",
                    objectFit: "cover",
                  }}
                />
              </td>
              <td>
                <strong>NAME</strong>
                <br />
                <small className="text-muted">DESC</small>
              </td>
              <td>
                <span className="badge bg-secondary">CATEGORY</span>
              </td>
              <td>
                <strong>$$</strong>
              </td>
              <td>
                <span className="badge bg-warning text-dark">SPECIAL TAG</span>
              </td>
              <td>
                <div className="btn-group" role="group">
                  <button
                    className="btn btn-sm btn-outline-success"
                    title="Edit"
                  >
                    <i className="bi bi-pencil"></i>
                  </button>
                  <button
                    className="btn btn-sm btn-outline-danger"
                    title="Delete"
                  >
                    <i className="bi bi-trash"></i>
                  </button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>