import { cn } from "@/lib/utils";
import { ReactNode } from "react";




export default function SectionTitle({ title, subtitle, classNameDev, classNameTitle, sideChildren, center = false }: { title: string, subtitle: string, classNameDev?: string, classNameTitle?: string, sideChildren?: ReactNode, center?: boolean }) {

    return <div className={`max-w-300 2xl:max-w-340  w-full ${sideChildren && 'flex justify-between items-end px-4 sm:p-0'}`}>
        <div className={cn("flex flex-col justify-center items-start  text-start sm:gap-1 ", center && 'items-center text-center', classNameDev)}>
            <div className='flex gap-4 items-center justify-start'>
                <img src="/images/design/sub-left-2.svg" className='max-h-2.5  sm:max-h-3.5 object-contain' alt="sub-left" />
                <span className="text-xs sm:text-lg uppercase tracking-[4px] let text-main">{subtitle}</span>
                {center && <img src="/images/design/sub-left-2.svg" className='max-h-3.5 object-contain rotate-y-180' alt="sub-left" />}
            </div>
            <h2 className={cn("w-fit  text-xl sm:text-3xl lg:text-4xl font-serif text-gray-900 ", classNameTitle)}> {title}</h2>
        </div>
        {sideChildren}
    </div>
}
