import React from "react";
import Button from "../../../common/Button";
import "../styles/DashboardHeader.css";

const DashboardHeader = ({ selectedPeriod, onPeriodChange, onViewLogs }) => {
  return (
    <div className="dashboard-header">
      <div className="dashboard-header-content">
        <div>
          <h1 className="dashboard-title">Safety Audit Dashboard</h1>
          <p className="dashboard-subtitle">
            Monitor safety compliance and audit activities across all sites.
          </p>
        </div>
        <div className="dashboard-header-controls">
          <div className="dashboard-control-group">
            <label htmlFor="dashboard-period" className="dashboard-control-label">
              Show data for
            </label>
            <select
              id="dashboard-period"
              value={selectedPeriod}
              onChange={(e) => onPeriodChange(e.target.value)}
              className="dashboard-period-select"
              aria-label="Choose time range for charts"
            >
              <option value="week">Last 7 days</option>
              <option value="month">Last 30 days</option>
              <option value="year">Last 12 months</option>
            </select>
          </div>
          <Button variant="dashboard-logs" onClick={onViewLogs}>
            View activity log
          </Button>
        </div>
      </div>
    </div>
  );
};

export default DashboardHeader;

