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

interface ServiceCardProps {
  title: string;
  description: string;
  icon: LucideIcon;
  className?: string;
  iconColor?: string;
}

const ServiceCard: React.FC<ServiceCardProps> = ({ 
  title, 
  description, 
  icon: Icon,
  className,
  iconColor = "text-java-blue" 
}) => {
  return (
    <div className={cn(
      "bg-white rounded-2xl p-8 shadow-soft card-hover border border-slate-100",
      className
    )}>
      <div className="flex flex-col h-full">
        <div className={cn(
          "rounded-full w-14 h-14 flex items-center justify-center mb-6",
          "bg-blue-50"
        )}>
          <Icon className={cn("w-7 h-7", iconColor)} />
        </div>
        <h3 className="text-xl font-bold mb-3">{title}</h3>
        <p className="text-muted-foreground flex-grow">{description}</p>
      </div>
    </div>
  );
};

export default ServiceCard;