export default function OrderDetailFixture() {
  return (
    <div>
      <div className="admin-page-header">
        <div className="admin-page-header-left">
          <Link
            to="/orders"
            className="admin-btn-icon"
            style={{ marginRight: "0.5rem" }}
          >
            <svg
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
            >
              <path d="M19 12H5M12 19l-7-7 7-7" />
            </svg>
          </Link>
          <div>
            <h1 className="admin-page-title">OBJ-2024-001</h1>
          </div>
        </div>
        <div className="admin-page-actions">
          <button className="admin-btn admin-btn-primary">Uložit</button>
          <button className="admin-btn admin-btn-secondary">Stornovat</button>
        </div>
      </div>
      <div className="admin-card" style={{ marginBottom: "1rem" }}>
        <div className="admin-card-body">
          <div
            className="admin-form-row"
            style={{
              display: "grid",
              gridTemplateColumns: "1fr 1fr",
              gap: "1rem",
            }}
          >
            <div className="admin-form-group">
              <label className="admin-form-label">Zákazník</label>
              <div>Firma s.r.o.</div>
            </div>
            <div className="admin-form-group">
              <label className="admin-form-label">Stav</label>
              <span className="admin-badge admin-badge-order-realizace">
                V realizaci
              </span>
            </div>
            <div className="admin-form-group">
              <label className="admin-form-label">Datum vytvoření</label>
              <div>1. 1. 2024</div>
            </div>
            <div className="admin-form-group">
              <label className="admin-form-label">Celkem</label>
              <div className="fw-500">50 000 Kč</div>
            </div>
          </div>
        </div>
      </div>
      <div className="admin-card">
        <div className="admin-card-body">
          <h3 className="admin-card-title">Položky</h3>
          <table className="admin-table">
            <thead>
              <tr>
                <th>Položka</th>
                <th>Množství</th>
                <th>Cena</th>
                <th>Celkem</th>
              </tr>
            </thead>
            <tbody>
              {Array.from({ length: 3 }, (_, i) => (
                <tr key={i}>
                  <td>Položka {i + 1}</td>
                  <td>1</td>
                  <td>10 000 Kč</td>
                  <td>10 000 Kč</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}