import MenuItem from "@mui/material/MenuItem";
import TextField from "@mui/material/TextField";

const ranges = ["近 1 小时", "近 24 小时", "近 7 天"];

export function TimeRangeSelect({ className = "", label = "时间", onChange, value }) {
  return (
    <TextField
      className={["time-select", className].filter(Boolean).join(" ")}
      label={label}
      select
      value={value}
      onChange={(event) => onChange(event.target.value)}
      size="small"
      variant="outlined"
    >
      {ranges.map((range) => (
        <MenuItem key={range} value={range}>
          {range}
        </MenuItem>
      ))}
    </TextField>
  );
}