import CalendarMonthOutlined from "@mui/icons-material/CalendarMonthOutlined";
import PublicOutlined from "@mui/icons-material/PublicOutlined";
import { countryOptions } from "../config/options.js";

export function DatabiHeader({ countryId, onCountryChange, onRangeChange, range }) {
  return (
    <header className="databi-header">
      <div className="brand-lockup">
        <div className="brand-emblem" aria-hidden="true" />
        <div>
          <h1>全球运营指挥中心</h1>
        </div>
      </div>
      <div className="header-controls">
        <div className="range-control">
          <input aria-label="开始日期" type="text" value={range.start} onChange={(event) => onRangeChange({ ...range, start: event.target.value })} />
          <span>~</span>
          <input aria-label="结束日期" type="text" value={range.end} onChange={(event) => onRangeChange({ ...range, end: event.target.value })} />
          <CalendarMonthOutlined fontSize="small" />
        </div>
        <label className="region-control">
          <PublicOutlined fontSize="small" />
          <select aria-label="国家区域" value={countryId} onChange={(event) => onCountryChange(Number(event.target.value))}>
            {countryOptions.map((item) => (
              <option key={item.id} value={item.id}>
                {item.label}
              </option>
            ))}
          </select>
        </label>
        <span className="live-dot">实时</span>
      </div>
    </header>
  );
}