import * as React from 'react';

export interface AboutWhatWeOfferProps {
  title: string;
  description: string;
  categories: { title: string; text: string; fullWidth?: boolean }[];
}

export function AboutWhatWeOffer({ title, description, categories }: AboutWhatWeOfferProps) {
  return (
    <section>
      <h2 className="text-xl md:text-2xl font-bold text-text-white mb-4 border-l-4 border-crimson-red pl-4">
        {title}
      </h2>
      <p className="text-text-white leading-relaxed mb-4 whitespace-pre-wrap">
        {description}
      </p>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {categories && categories.map((category, i) => (
          <div key={i} className={`bg-dark-gray border border-soft-gray-border rounded-lg p-4 ${category.fullWidth ? 'md:col-span-2' : ''}`}>
            <h3 className="text-crimson-red font-bold mb-2">{category.title}</h3>
            <p className="text-text-light-gray text-sm leading-relaxed whitespace-pre-wrap">
              {category.text}
            </p>
          </div>
        ))}
      </div>
    </section>
  );
}
