'use client';

interface InkWashBackgroundProps {
  /** Background variant */
  variant?: 'hero' | 'section' | 'subtle';
  className?: string;
}

/**
 * 水墨晕散背景组件
 * 用于 Hero 和各大 section 的水墨晕散效果
 */
export function InkWashBackground({ variant = 'section', className }: InkWashBackgroundProps) {

  if (variant === 'hero') {
    return (
      <div className={`absolute inset-0 overflow-hidden pointer-events-none ${className ?? ''}`} aria-hidden="true">
        {/* 主墨晕 */}
        <div
          className="absolute top-[10%] left-[15%] w-[600px] h-[600px] rounded-full"
          style={{
            background: 'radial-gradient(circle, rgba(var(--color-primary-rgb), 0.04) 0%, transparent 60%)',
          }}
        />
        {/* 品牌红点缀 */}
        <div
          className="absolute bottom-[20%] right-[10%] w-[400px] h-[400px] rounded-full"
          style={{
            background: 'radial-gradient(circle, rgba(var(--color-brand-primary-rgb), 0.025) 0%, transparent 55%)',
          }}
        />
        {/* 宣纸纹理 */}
        <div className="absolute inset-0 bg-paper-texture opacity-50" />
      </div>
    );
  }

  if (variant === 'subtle') {
    return (
      <div className={`absolute inset-0 overflow-hidden pointer-events-none ${className ?? ''}`} aria-hidden="true">
        <div className="absolute inset-0 bg-paper-texture opacity-30" />
      </div>
    );
  }

  // Default: section
  return (
    <div className={`absolute inset-0 overflow-hidden pointer-events-none ${className ?? ''}`} aria-hidden="true">
      <div
        className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[400px]"
        style={{
          background: 'radial-gradient(ellipse at 50% 0%, rgba(var(--color-primary-rgb), 0.025) 0%, transparent 65%)',
        }}
      />
      <div className="absolute inset-0 bg-paper-texture opacity-30" />
    </div>
  );
}