import React from 'react';
import { LucideIcon } from 'lucide-react';
import { cn } from '@/lib/utils';

interface FeatureBadgeProps {
  icon: LucideIcon;
  title: string;
  subtitle: string;
}

export const FeatureBadge: React.FC<FeatureBadgeProps> = ({ 
  icon: Icon, 
  title, 
  subtitle 
}) => (
  <div className="flex items-center p-3 bg-white/80 rounded-xl border border-gray-200 shadow-sm">
    <div className="w-10 h-10 bg-gradient-to-br from-green-500 to-green-600 rounded-lg flex items-center justify-center text-white mr-3">
      <Icon className="w-5 h-5" strokeWidth={2} />
    </div>
    <div>
      <div className="font-semibold text-gray-800 text-sm">{title}</div>
      <div className="text-gray-600 text-xs">{subtitle}</div>
    </div>
  </div>
);

interface FeatureItemProps {
  feature: string;
  index: number;
}

export const FeatureItem: React.FC<FeatureItemProps> = ({ feature, index }) => (
  <div className="flex items-start bg-blue-50 rounded-xl p-4 border border-blue-200 hover:bg-blue-100 transition-colors duration-200 group">
    <div className="w-6 h-6 bg-gradient-to-br from-blue-600 to-blue-500 rounded-full flex items-center justify-center mr-3 mt-0.5 flex-shrink-0 group-hover:scale-110 transition-transform duration-200">
      <div className="w-2 h-2 bg-white rounded-full"></div>
    </div>
    <span className="text-gray-700 font-medium text-sm lg:text-base leading-relaxed">{feature}</span>
  </div>
);

interface SectionTitleProps {
  icon: LucideIcon;
  title: string;
}

export const SectionTitle: React.FC<SectionTitleProps> = ({ icon: Icon, title }) => (
  <h3 className="text-xl sm:text-2xl lg:text-3xl mb-4 lg:mb-6 text-gray-800 font-heading font-bold flex items-center">
    <div className="w-8 h-8 sm:w-10 sm:h-10 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg flex items-center justify-center text-white mr-3">
      <Icon className="w-5 h-5 sm:w-6 sm:h-6" strokeWidth={2} />
    </div>
    {title}
  </h3>
);