export default function AttendanceFixture() {
  return (
    <div>
      <div className="admin-page-header">
        <div>
          <h1 className="admin-page-title">Docházka</h1>
          <p className="admin-page-subtitle">pondělí 28. dubna 2025</p>
        </div>
      </div>
      <div className="attendance-layout">
        <div className="attendance-main">
          <div className="attendance-clock-card">
            <div className="attendance-clock-header">
              <div className="attendance-clock-status">
                <span className="attendance-status-dot" />
                <span>Nepracuji</span>
              </div>
              <div className="attendance-clock-time">08:30</div>
            </div>
            <div className="attendance-clock-actions">
              <button className="admin-btn admin-btn-primary w-full">
                Příchod
              </button>
              <button className="admin-btn admin-btn-secondary w-full">
                Žádost o nepřítomnost
              </button>
            </div>
          </div>
        </div>
        <div className="attendance-sidebar">
          <div className="attendance-balance-card">
            <h3 className="attendance-balance-title">Dovolená 2025</h3>
            <div className="attendance-balance-value">
              <span className="attendance-balance-number">12</span>
              <span className="attendance-balance-unit">dnů</span>
            </div>
            <div className="attendance-balance-detail">
              <span>Celkem: 160h</span>
              <span>Čerpáno: 64h</span>
            </div>
            <div className="attendance-balance-bar">
              <div
                className="attendance-balance-progress"
                style={{ width: "60%" }}
              />
            </div>
          </div>
          <div className="admin-stat-card">
            <div className="admin-stat-icon danger">
              <svg
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
              >
                <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
              </svg>
            </div>
            <div className="admin-stat-content">
              <span className="admin-stat-label">Nemoc 2025</span>
              <span className="admin-stat-value">16h čerpáno</span>
            </div>
          </div>
          <div className="attendance-quick-links">
            <h4 className="attendance-quick-title">Rychlé odkazy</h4>
            <a className="attendance-quick-link">
              <span>Moje žádosti</span>
            </a>
            <a className="attendance-quick-link">
              <span>Historie docházky</span>
            </a>
          </div>
        </div>
      </div>
    </div>
  );
}