export default function InvoicesFixture() {
  return (
    <div>
      <div className="admin-page-header">
        <div>
          <h1 className="admin-page-title">Faktury</h1>
          <p className="admin-page-subtitle">15 faktur</p>
        </div>
      </div>
      <div
        className="dash-kpi-grid"
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(4, 1fr)",
          gap: "1rem",
          marginBottom: "1rem",
        }}
      >
        {["Vystaveno", "Zaplaceno", "Po splatnosti", "Celkem"].map(
          (label, i) => (
            <div
              key={i}
              className="dash-kpi-card"
              style={{
                padding: "1.25rem",
                borderRadius: 10,
                background: "var(--bg-secondary)",
              }}
            >
              <div style={{ fontSize: "0.875rem", marginBottom: "0.25rem" }}>
                {label}
              </div>
              <div style={{ fontSize: "1.5rem", fontWeight: 600 }}>
                {i * 5 + 3}
              </div>
            </div>
          ),
        )}
      </div>
      <div className="admin-card">
        <div className="admin-card-body">
          <div className="admin-search-bar mb-4">
            <input className="admin-form-input" placeholder="" />
          </div>
          <div className="admin-table-responsive">
            <table className="admin-table">
              <thead>
                <tr>
                  <th>Číslo</th>
                  <th>Zákazník</th>
                  <th>Stav</th>
                  <th>Datum</th>
                  <th className="text-right">Částka</th>
                  <th>Akce</th>
                </tr>
              </thead>
              <tbody>
                {Array.from({ length: 5 }, (_, i) => (
                  <tr key={i}>
                    <td className="admin-mono">FV-2024-00{i + 1}</td>
                    <td>Firma s.r.o.</td>
                    <td>
                      <span className="admin-badge admin-badge-invoice-issued">
                        Vystaveno
                      </span>
                    </td>
                    <td className="admin-mono">1. 1. 2024</td>
                    <td className="admin-mono text-right">50 000 Kč</td>
                    <td>
                      <div className="admin-table-actions">
                        <button className="admin-btn-icon">👁</button>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  );
}