RestaurantDash/src/components/Home/Analytics&Reporting/TimeFrameSelector.js

import React from 'react';
import { Button, Stack } from '@mui/material';

const options = ['All Time', '12 Months', '30 Days', '7 Days', '24 Hour'];

const TimeFrameSelector = ({ selected, onChange }) => (
  <Stack direction="row" spacing={1} sx={{ flexWrap: 'wrap', mb: 2 }}>
    {options.map(option => (
      <Button
        key={option}
        size="small"
        variant={selected === option ? 'contained' : 'outlined'}
        onClick={() => onChange(option)}
        sx={{ textTransform: 'none' }}
      >
        {option}
      </Button>
    ))}
  </Stack>
);

export default TimeFrameSelector;