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

interface ServiceCardAboutProps {
  icon: LucideIcon;
  title: string;
  description: string;
  colSpan?: boolean;
}

export const ServiceCardAbout: React.FC<ServiceCardAboutProps> = ({ 
  icon: Icon, 
  title, 
  description, 
  colSpan = false 
}) => (
  <div className={cn(
    'flex items-start space-x-4 p-6 bg-white rounded-xl',
    'shadow-lg border border-gray-200',
    commonClasses.transition,
    commonClasses.cardHover,
    colSpan && 'md:col-span-2'
  )}>
    <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center text-white shadow-lg">
      <Icon className="w-6 h-6" strokeWidth={2} />
    </div>
    <div>
      <h4 className="font-bold text-gray-900 mb-2 text-lg">{title}</h4>
      <p className="text-gray-600">{description}</p>
    </div>
  </div>
);