import React from 'react';

export interface WelcomeBannerProps {
  title?: string;
  subtitle?: string;
  buttonText?: string;
  backgroundColor?: 'primary' | 'secondary' | 'accent';
  showButton?: boolean;
}

/**
 * Welcome Banner - Example Reactpify Component
 * 
 * This component demonstrates how Reactpify automatically:
 * - Generates Shopify section settings from TypeScript props
 * - Creates Liquid templates with fallback content
 * - Bridges React components with Shopify themes
 */
export const WelcomeBanner: React.FC<WelcomeBannerProps> = ({
  title = 'Welcome to Reactpify! 🚀',
  subtitle = 'Your React components are now working perfectly in Shopify',
  buttonText = 'Test React',
  backgroundColor = 'primary',
  showButton = true
}) => {
  const handleClick = () => {
    alert('🎉 React is working! Your component is successfully integrated with Shopify.');
  };

  return (
    <div className="w-full max-w-4xl mx-auto px-4 py-12">
      <div className={`
        relative overflow-hidden rounded-2xl shadow-xl
        ${backgroundColor === 'primary' ? 'bg-gradient-to-br from-blue-500 to-blue-700' : 
          backgroundColor === 'secondary' ? 'bg-gradient-to-br from-green-500 to-green-700' :
          'bg-gradient-to-br from-purple-500 to-purple-700'}
        text-white p-8 md:p-12 text-center
      `}>
        {/* Background decoration */}
        <div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full -translate-y-16 translate-x-16 animate-pulse"></div>
        <div className="absolute bottom-0 left-0 w-24 h-24 bg-white/10 rounded-full translate-y-12 -translate-x-12 animate-pulse" style={{animationDelay: '1s'}}></div>
        
        {/* Content */}
        <div className="relative z-10">
          <h1 className="text-4xl md:text-5xl font-bold mb-6 leading-tight">
            {title}
          </h1>
          
          <p className="text-xl md:text-2xl opacity-90 mb-8 max-w-2xl mx-auto leading-relaxed">
            {subtitle}
          </p>
          
          {showButton && (
            <button
              onClick={handleClick}
              className="bg-white text-gray-800 hover:bg-gray-100 font-semibold py-3 px-8 rounded-xl transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-xl"
            >
              <span className="flex items-center justify-center">
                <span className="mr-2">⚡</span>
                {buttonText}
              </span>
            </button>
          )}
          
          {/* Feature badges */}
          <div className="mt-10 flex flex-wrap justify-center gap-3">
            {[
              { icon: "🤖", text: "Auto-Generated" },
              { icon: "⚡", text: "Vite Powered" },
              { icon: "🎨", text: "Tailwind CSS" },
              { icon: "🛍️", text: "Shopify Ready" }
            ].map((feature, index) => (
              <div
                key={feature.text}
                className="px-4 py-2 bg-white/20 rounded-lg text-sm font-medium backdrop-blur-sm border border-white/30 hover:bg-white/30 transition-colors duration-300"
                style={{ animationDelay: `${index * 0.1}s` }}
              >
                <span className="mr-2">{feature.icon}</span>
                {feature.text}
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};