import React from 'react';

interface ThemeClasses {
  title: string;
  heading: string;
  text: string;
}

interface Section {
  heading: string;
  text: string;
  list?: string[];
}

interface Content {
  title: string;
  sections: Section[];
}

const getThemeClasses = (theme: 'dark' | 'light'): ThemeClasses => ({
  title: theme === 'dark' ? 'text-white' : '!text-gray-900',
  heading: theme === 'dark' ? 'text-white' : '!text-gray-900',
  text: theme === 'dark' ? 'text-gray-200' : '!text-gray-900'
});

const renderSection = (section: Section, theme: 'dark' | 'light') => {
  const themeClasses = getThemeClasses(theme);
  const textColor = themeClasses.text;
  return (
    <div key={section.heading} className={`mb-6 ${themeClasses.text}`}>
      <h4 className={`text-lg font-semibold mb-2 ${themeClasses.heading}`}>{section.heading}</h4>
      <p className={`mb-3 ${textColor}`}>{section.text}</p>
      {section.list && (
        <ul className={`list-disc pl-5 space-y-1 ${textColor}`}>
          {section.list.map((item, index) => (
            <li key={index} className={textColor}>{item}</li>
          ))}
        </ul>
      )}
    </div>
  );
};

export const renderDisclaimerContent = (content: Content | null, theme: 'dark' | 'light' = 'dark'): React.ReactNode => {
  if (!content) return null;
  const themeClasses = getThemeClasses(theme);

  return (
    <div className="space-y-6">
      <h3 className={`text-xl font-bold mb-6 ${themeClasses.title}`}>{content.title}</h3>
      {content.sections.map((section) => renderSection(section, theme))}
    </div>
  );
};