import React from "react";
import { Container } from "@/components/Container";

interface SectionTitleProps {
	preTitle?: string;
	title?: string;
	align?: "left" | "center";
	children?: React.ReactNode;
}

export const SectionTitle = (props: Readonly<SectionTitleProps>) => {
	return (
		<Container
			className={`flex w-full flex-col pt-28 ${
				props.align === "left" ? "" : "items-center justify-center text-center"
			}`}
		>
			{props.preTitle && (
				<div className="text-sm font-bold tracking-wider uppercase">
					{props.preTitle}
				</div>
			)}

			{props.title && (
				<h2 className="mt-3 text-3xl font-bold leading-snug tracking-tight  lg:leading-tight lg:text-[56px] dark:text-white">
					{props.title}
				</h2>
			)}

			{props.children && (
				<p className="max-w-2xl py-4 text-lg leading-normal lg:text-xl xl:text-xl dark:text-gray-300">
					{props.children}
				</p>
			)}
		</Container>
	);
};