w-312356-main/src/components/WaveDivider.tsx

import React from 'react';

interface WaveDividerProps {
  variant?: 'wave' | 'angle' | 'curve' | 'zigzag' | 'smooth';
  className?: string;
  fillColor?: string;
  strokeColor?: string;
}

const WaveDivider: React.FC<WaveDividerProps> = ({ 
  variant = 'wave', 
  className = '', 
  fillColor = '#f8fbff',
  strokeColor = '#e3eaf3'
}) => {
  const variants = {
    wave: (
      <svg viewBox="0 0 1440 80" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-full h-20">
        <path d="M0,40 C360,120 1080,-40 1440,40 L1440,80 L0,80 Z" fill={fillColor} />
        <path d="M0,60 C360,140 1080,-20 1440,60" fill="none" stroke={strokeColor} strokeWidth="2" opacity="0.6" />
        <path d="M0,50 C240,100 720,20 1440,50" fill="none" stroke={strokeColor} strokeWidth="1" opacity="0.3" />
      </svg>
    ),
    angle: (
      <svg viewBox="0 0 1440 60" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-full h-15">
        <path d="M0,0 L1440,30 L1440,60 L0,60 Z" fill={fillColor} />
        <path d="M0,0 L1440,30" fill="none" stroke={strokeColor} strokeWidth="2" opacity="0.4" />
        <path d="M0,15 L1440,45" fill="none" stroke={strokeColor} strokeWidth="1" opacity="0.2" />
      </svg>
    ),
    curve: (
      <svg viewBox="0 0 1440 100" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-full h-25">
        <path d="M0,50 Q360,0 720,50 T1440,50 L1440,100 L0,100 Z" fill={fillColor} />
        <path d="M0,50 Q360,0 720,50 T1440,50" fill="none" stroke={strokeColor} strokeWidth="2" opacity="0.5" />
        <path d="M0,60 Q360,10 720,60 T1440,60" fill="none" stroke={strokeColor} strokeWidth="1" opacity="0.3" />
      </svg>
    ),
    zigzag: (
      <svg viewBox="0 0 1440 80" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-full h-20">
        <path d="M0,40 L180,20 L360,60 L540,20 L720,60 L900,20 L1080,60 L1260,20 L1440,60 L1440,80 L0,80 Z" fill={fillColor} />
        <path d="M0,40 L180,20 L360,60 L540,20 L720,60 L900,20 L1080,60 L1260,20 L1440,60" fill="none" stroke={strokeColor} strokeWidth="2" opacity="0.4" />
      </svg>
    ),
    smooth: (
      <svg viewBox="0 0 1440 120" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-full h-30">
        <path d="M0,60 C240,0 480,120 720,60 C960,0 1200,120 1440,60 L1440,120 L0,120 Z" fill={fillColor} />
        <path d="M0,60 C240,0 480,120 720,60 C960,0 1200,120 1440,60" fill="none" stroke={strokeColor} strokeWidth="2" opacity="0.5" />
        <path d="M0,70 C240,10 480,130 720,70 C960,10 1200,130 1440,70" fill="none" stroke={strokeColor} strokeWidth="1" opacity="0.3" />
      </svg>
    )
  };

  return (
    <div className={`w-full overflow-hidden ${className}`} style={{ lineHeight: 0 }}>
      {variants[variant]}
    </div>
  );
};

export default WaveDivider;