// src/views/Community/components/DynamicNews/ModeToggleButtons.js
// 事件列表模式切换按钮组

import React from 'react';
import { Button, ButtonGroup } from '@chakra-ui/react';

/**
 * 事件列表模式切换按钮组
 * @param {string} mode - 当前模式 'vertical' | 'four-row'
 * @param {Function} onModeChange - 模式切换回调
 */
const ModeToggleButtons = React.memo(({ mode, onModeChange }) => {
  return (
    <ButtonGroup size="sm" isAttached>
      <Button
        onClick={() => onModeChange('vertical')}
        colorScheme="blue"
        variant={mode === 'vertical' ? 'solid' : 'outline'}
      >
        列表
      </Button>
      <Button
        onClick={() => onModeChange('four-row')}
        colorScheme="blue"
        variant={mode === 'four-row' ? 'solid' : 'outline'}
      >
        平铺
      </Button>
    </ButtonGroup>
  );
});

export default ModeToggleButtons;