import './blocks.css';

export interface FeatureGridBlockProps {
  heading?: string;
  features: Array<{
    title: string;
    description?: string;
    icon?: string;
  }>;
  columns?: 2 | 3 | 4;
}

export function FeatureGridBlock({ heading, features, columns = 3 }: FeatureGridBlockProps) {
  return (
    <section className="shared-card">
      {heading && <h3>{heading}</h3>}
      <div className={`shared-grid shared-grid--${columns}`}>
        {features.map((feature) => (
          <article key={feature.title} className="shared-feature">
            {feature.icon && <span className="shared-feature__icon">{feature.icon}</span>}
            <h4>{feature.title}</h4>
            {feature.description && <p>{feature.description}</p>}
          </article>
        ))}
      </div>
    </section>
  );
}


