// src/views/AgentChat/components/BackgroundEffects.js
// 背景渐变装饰层组件

import React from 'react';
import { Box } from '@chakra-ui/react';

/**
 * BackgroundEffects - 背景渐变装饰层
 *
 * 包含主背景渐变和两个装饰光效（右上紫色、左下蓝色）
 *
 * @returns {JSX.Element}
 */
const BackgroundEffects = () => {
  return (
    <>
      {/* 主背景渐变层 */}
      <Box
        position="absolute"
        top={0}
        left={0}
        right={0}
        bottom={0}
        bgGradient="linear(to-br, gray.900, gray.800, purple.900)"
        zIndex={0}
      />

      {/* 右上角紫色光效 */}
      <Box
        position="absolute"
        top="0"
        right="-20%"
        width="600px"
        height="600px"
        bgGradient="radial(circle, purple.600, transparent)"
        opacity="0.15"
        filter="blur(100px)"
        pointerEvents="none"
        zIndex={0}
      />

      {/* 左下角蓝色光效 */}
      <Box
        position="absolute"
        bottom="-30%"
        left="-10%"
        width="500px"
        height="500px"
        bgGradient="radial(circle, blue.600, transparent)"
        opacity="0.1"
        filter="blur(100px)"
        pointerEvents="none"
        zIndex={0}
      />
    </>
  );
};

export default BackgroundEffects;