import React from 'react';
import { useTheme } from '../../contexts/ThemeContext';

export const TPattern: React.FC = () => {
  const { theme, isDark } = useTheme();
  const patternOpacity = isDark ? 0.03 : 0.04;

  return (
    <div
      style={{
        position: 'absolute',
        top: 0,
        right: 0,
        width: 300,
        height: 300,
        opacity: patternOpacity,
        pointerEvents: 'none',
      }}
    >
      <svg width="300" height="300" viewBox="0 0 300 300">
        <defs>
          <pattern id="grid" width="30" height="30" patternUnits="userSpaceOnUse">
            <path d="M 30 0 L 0 0 0 30" fill="none" stroke={theme.accent} strokeWidth="1"/>
          </pattern>
        </defs>
        <rect width="300" height="300" fill="url(#grid)"/>
      </svg>
    </div>
  );
};