import React from "react";
import { TERMS_AND_CONDITIONS } from "@/constants";

const TermsOfService = () => {
	const renderContent = () => {
		return TERMS_AND_CONDITIONS.split("\n").map((line, index) => {
			if (line.startsWith("**")) {
				return (
					<h3 key={index} className="text-lg lowercase italic mb-4">
						{line.replace(/\*\*/g, "")}
					</h3>
				);
			} else if (line.startsWith("*")) {
				return (
					<li key={index} className="list-disc list-inside mb-2">
						{line.replace(/\*/g, "")}
					</li>
				);
			} else if (/^\d+\./.test(line)) {
				return (
					<h4 key={index} className="text-lg font-semibold mb-2">
						{line}
					</h4>
				);
			} else {
				return (
					<p key={index} className="mb-4">
						{line}
					</p>
				);
			}
		});
	};

	return (
		<section
			id="tos"
			className="wrapper container py-24 md:py-28 gap-4 flex flex-col"
		>
			<h2 className="text-3xl font-bold italic underline mb-6">
				Terms of Service
			</h2>
			<div className="prose prose-lg dark:prose-invert">{renderContent()}</div>
		</section>
	);
};

export default TermsOfService;
