import Container from '@/components/layout/Container';
import RenderMarkdown from '@/components/shared/RenderMarkdown';
import { getTermsAndConditions } from '@/api/getTermsAndConditions';

export default async function TermsAndConditions() {
  const { termsAndConditions } = await getTermsAndConditions();

  return (
    <Container as="section" className="my-16">
      <RenderMarkdown
        components={{
          h1: ({ children }) => (
            <h1 className="text-inherit text-2xl font-serif mb-4 md:text-4xl">
              {children}
            </h1>
          ),
          p: ({ children }) => <p className="mb-3">{children}</p>,
          ul: ({ children }) => <ul className="list-disc ps-6">{children}</ul>
        }}>
        {termsAndConditions}
      </RenderMarkdown>
    </Container>
  );
}
