import Refresh from "@mui/icons-material/Refresh";
import { useTimeZone } from "@/app/timezone/TimeZoneProvider.jsx";
import { Button } from "@/shared/ui/Button.jsx";
import { PageHead } from "@/shared/ui/PageHead.jsx";
import { TimeRangeSelect } from "@/shared/ui/TimeRangeSelect.jsx";

export function DashboardToolbar({ onRefresh, onRangeChange, overview, range }) {
  const { formatMillis } = useTimeZone();

  return (
    <PageHead title="工作台" meta={`刷新时间 ${formatMillis(overview?.updatedAtMs ?? overview?.updatedAt)}`}>
      <TimeRangeSelect value={range} onChange={onRangeChange} />
      <Button onClick={onRefresh}>
        <Refresh fontSize="small" />
        刷新
      </Button>
    </PageHead>
  );
}