import React from 'react';

type BackgroundType = 'solid' | 'glass' | 'transparent';
type BorderRadiusType = 'none' | 'small' | 'rounded' | 'large';
type CardStyleType = 'minimal' | 'glass' | 'glass-elevated' | 'solid';
type ButtonStyleType = 'solid' | 'glass' | 'outline';
type TextAnimationType = 'none' | 'entrance-slide' | 'entrance-fade' | 'typing';

interface HomeProps {
  defaultTextAnimation?: TextAnimationType;
  borderRadius?: BorderRadiusType;
  background?: BackgroundType;
  cardStyle?: CardStyleType;
  primaryButtonStyle?: ButtonStyleType;
  secondaryButtonStyle?: ButtonStyleType;
}

const Home: React.FC<HomeProps> = ({
  defaultTextAnimation = "entrance-slide",  borderRadius = "rounded",  background = "glass",  cardStyle = "glass-elevated",  primaryButtonStyle = "solid",  secondaryButtonStyle = "glass"
}) => {
  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900">
      <div className="container mx-auto px-4 py-16">
        <div className="text-center mb-16">
          <h1 className="text-6xl font-bold text-white mb-6">
            Welcome to Webild Components
          </h1>
          <p className="text-xl text-slate-300 max-w-3xl mx-auto">
            A modern component library built with React and Tailwind CSS
          </p>
        </div>
        
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          <div className="bg-white/10 backdrop-blur-sm rounded-xl p-6 border border-white/20">
            <h3 className="text-2xl font-semibold text-white mb-4">Modern Design</h3>
            <p className="text-slate-300">
              Beautiful, responsive components with glass morphism effects
            </p>
          </div>
          
          <div className="bg-white/10 backdrop-blur-sm rounded-xl p-6 border border-white/20">
            <h3 className="text-2xl font-semibold text-white mb-4">TypeScript</h3>
            <p className="text-slate-300">
              Fully typed components for better developer experience
            </p>
          </div>
          
          <div className="bg-white/10 backdrop-blur-sm rounded-xl p-6 border border-white/20">
            <h3 className="text-2xl font-semibold text-white mb-4">Customizable</h3>
            <p className="text-slate-300">
              Flexible theming system with multiple style variants
            </p>
          </div>
        </div>
        
        <div className="text-center mt-16">
          <button className="bg-gradient-to-r from-purple-500 to-pink-500 text-white px-8 py-4 rounded-lg font-semibold hover:from-purple-600 hover:to-pink-600 transition-all duration-300 transform hover:scale-105">
            Get Started
          </button>
        </div>
      </div>
    </div>
  );
};

export default Home;