export default function AttendanceBalancesFixture() {
  return (
    <div>
      <div className="admin-page-header">
        <div>
          <h1 className="admin-page-title">Správa bilancí</h1>
        </div>
        <div className="admin-page-actions">
          <select className="admin-form-select" style={{ minWidth: 100 }}>
            <option>2025</option>
          </select>
        </div>
      </div>
      <div className="admin-card">
        <div className="admin-card-body">
          <div className="admin-table-responsive">
            <table className="admin-table">
              <thead>
                <tr>
                  <th>Zaměstnanec</th>
                  <th>Nárok (h)</th>
                  <th>Čerpáno (h)</th>
                  <th>Zbývá (h)</th>
                  <th>Nemoc (h)</th>
                  <th>Akce</th>
                </tr>
              </thead>
              <tbody>
                {Array.from({ length: 4 }, (_, i) => (
                  <tr key={i}>
                    <td className="fw-500">Jan Novák</td>
                    <td className="admin-mono">160</td>
                    <td className="admin-mono">40.0</td>
                    <td className="admin-mono">120.0</td>
                    <td className="admin-mono">8.0</td>
                    <td>
                      <div className="admin-table-actions">
                        <button className="admin-btn-icon" title="Upravit">
                          &#9998;
                        </button>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <div className="mt-6">
        <h2 className="admin-page-title mb-4" style={{ fontSize: "1.25rem" }}>
          Měsíční přehled fondu 2025
        </h2>
        <div className="admin-grid admin-grid-3">
          {Array.from({ length: 3 }, (_, i) => (
            <div key={i} className="admin-card">
              <div className="admin-card-body">
                <h3 style={{ fontWeight: 600, fontSize: "1rem", margin: 0 }}>
                  Duben
                </h3>
                <div
                  style={{
                    display: "flex",
                    flexDirection: "column",
                    gap: "0.375rem",
                    marginTop: "0.5rem",
                  }}
                >
                  <div
                    style={{
                      display: "flex",
                      justifyContent: "space-between",
                      fontSize: 12,
                    }}
                  >
                    <span>Jan Novák</span>
                    <span className="text-secondary">8h</span>
                  </div>
                  <div
                    style={{
                      height: 3,
                      background: "var(--bg-tertiary)",
                      borderRadius: 2,
                      overflow: "hidden",
                    }}
                  >
                    <div
                      style={{
                        height: "100%",
                        width: "75%",
                        background: "var(--gradient)",
                        borderRadius: 2,
                      }}
                    />
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}