import type { ReactNode } from 'react';
import './blocks.css';

export interface ServiceItem {
  title: string;
  description: string;
  icon?: ReactNode;
  imageUrl?: string;
}

export interface ServicesBlockProps {
  title?: string;
  subtitle?: string;
  services: ServiceItem[];
  columns?: 2 | 3 | 4;
  variant?: 'default' | 'card' | 'minimal';
}

export function ServicesBlock({ 
  title, 
  subtitle, 
  services, 
  columns = 3,
  variant = 'default' 
}: ServicesBlockProps) {
  return (
    <section className={`shared-services shared-services--${variant}`}>
      {title && <h2 className="shared-services__title">{title}</h2>}
      {subtitle && <p className="shared-services__subtitle">{subtitle}</p>}
      <div className={`shared-services__grid shared-services__grid--${columns}`}>
        {services.map((service, index) => (
          <div key={index} className="shared-services__item">
            {service.icon && <div className="shared-services__icon">{service.icon}</div>}
            {service.imageUrl && (
              <img src={service.imageUrl} alt={service.title} className="shared-services__image" />
            )}
            <h3 className="shared-services__item-title">{service.title}</h3>
            <p className="shared-services__item-description">{service.description}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

