import * as React from 'react';

export interface AboutWhyWeExistProps {
  title: string;
  descriptionTop: string;
  challenges: { text: string }[];
  descriptionBottom: string;
}

export function AboutWhyWeExist({ title, descriptionTop, challenges, descriptionBottom }: AboutWhyWeExistProps) {
  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">
        {descriptionTop}
      </p>
      {challenges && challenges.length > 0 && (
        <ul className="list-disc list-inside space-y-2 text-text-white leading-relaxed pl-4">
          {challenges.map((challenge, i) => (
            <li key={i}>{challenge.text}</li>
          ))}
        </ul>
      )}
      <p className="text-text-white leading-relaxed mt-4 whitespace-pre-wrap">
        {descriptionBottom}
      </p>
    </section>
  );
}
