import * as React from 'react';

export interface LegalSectionProps {
  title: string;
  contentTop: string;
  listItems?: { text: string }[];
  highlightBoxTitle?: string;
  highlightBoxText?: string;
  contentBottom?: string;
}

export function LegalSection({ title, contentTop, listItems, highlightBoxTitle, highlightBoxText, contentBottom }: LegalSectionProps) {
  return (
    <section>
      {title && (
        <h2 className="text-xl md:text-2xl font-bold text-text-white mb-4 border-l-4 border-crimson-red pl-4">
          {title}
        </h2>
      )}
      {contentTop && (
        <p className="text-text-white leading-relaxed mb-4 whitespace-pre-wrap">
          {contentTop}
        </p>
      )}
      {listItems && listItems.length > 0 && (
        <ul className="list-disc list-inside space-y-2 text-text-white leading-relaxed pl-4 mb-4">
          {listItems.map((item, i) => (
            <li key={i}>{item.text}</li>
          ))}
        </ul>
      )}
      {highlightBoxTitle && highlightBoxText && (
        <div className="bg-dark-gray border border-soft-gray-border rounded-lg p-4 mb-4">
          <p className="text-text-white font-semibold mb-2">{highlightBoxTitle}</p>
          <p className="text-text-light-gray text-sm leading-relaxed whitespace-pre-wrap">
            {highlightBoxText}
          </p>
        </div>
      )}
      {contentBottom && (
        <p className="text-text-white leading-relaxed whitespace-pre-wrap">
          {contentBottom}
        </p>
      )}
    </section>
  );
}
