import { useEffect } from 'react';
import { Frame } from 'framer';
import { gsap } from 'gsap';

export function AnimatedBanner() {
  useEffect(() => {
    // Animation for SVG elements
    gsap.fromTo(
      '.circle',
      { scale: 0.5, opacity: 0 },
      { scale: 1, opacity: 1, duration: 1, ease: 'power2.out' }
    );
    gsap.fromTo(
      '.text',
      { y: 50, opacity: 0 },
      { y: 0, opacity: 1, duration: 1, delay: 0.5, ease: 'power2.out' }
    );
  }, []);

  return (
    <Frame
      width="100%"
      height="300px"
      background="#f0f0f0"
      center
      style={{ position: 'relative' }}
    >
      <svg
        width="100%"
        height="100%"
        viewBox="0 0 400 100"
        xmlns="http://www.w3.org/2000/svg"
        style={{ position: 'absolute', top: 0, left: 0 }}
      >
        <circle
          className="circle"
          cx="50%"
          cy="50%"
          r="40"
          fill="#3498db"
          stroke="#2980b9"
          strokeWidth="4"
        />
        <text
          className="text"
          x="50%"
          y="50%"
          textAnchor="middle"
          dominantBaseline="middle"
          fontSize="24"
          fill="#2c3e50"
        >
          Welcome to Our Banner!
        </text>
      </svg>
    </Frame>
  );
}