import { RichText } from './RichText';

interface ContentPageProps {
  title: string;
  subTitle?: string;
  markdownContent: string;
}

const ContentPage: React.FC<ContentPageProps> = ({ title, subTitle, markdownContent }) => {
  return (
    <div className="w-full flex flex-col items-center pt-page flex-1">
      <div className="w-full px-2 flex flex-col gap-2 overflow-hidden">
        <div className="w-full bg-mma-blue py-8 sm:py-16 px-site">
          <div className="flex flex-col gap-2 sm:gap-4">
            <h1 className="text-3xl sm:text-5xl font-slab font-bold text-white">{title}</h1>
            {subTitle && (
              <h2 className="text-base sm:text-lg font-semibold font-slab text-mma-yellow">
                {subTitle}
              </h2>
            )}
          </div>
        </div>

        <div className="px-site py-4 sm:py-16">
          <div className="text-sm sm:text-base content-text">
            <RichText content={markdownContent} />
          </div>
        </div>
      </div>
    </div>
  );
};

export default ContentPage;