import { ClientsLogos, RightSVG } from "@/assets/svg"
import { metaTitles } from "@/components/metaData/metaTitles"
import { Button } from "@/components/ui/buttons/Button"
import CustomImage from "@/components/ui/miscellaneous/CustomImage"
import VideoPopup from "@/components/ui/poups/VideoPopup"
import { H1, H5, H6, S } from "@/components/ui/typography"
import { useTranslations } from "next-intl"

interface IHeroSection {
    content: {
        title?: string,
        header: string,
        description?: string,
        buttonTxt?: string
        showCompanies?: boolean,
        outlinedButton?: string,
        isWatchVideo?: boolean
    },
    py?: string,
    children?: React.ReactNode
}
const HeroSection = ({ content, children, py = "32" }: IHeroSection) => {
    const t = useTranslations()
    return (
        <div className="xl:bg-lightBackground rounded-lg py-10 lg:py-20   ">
            <div className="grid grid-cols-1 xl:grid-cols-2  gap-4 max-w-[1920px] mx-auto max-lg:mx-4 ">
                <div className={`flex flex-col gap-3  xl:py-${py} lg:pl-12`}>
                    {content?.title && <H5 className="text-primary">{t(content?.title)}</H5>}
                    <H1 className="text-foreground">{t(content.header)}</H1>
                    {content.description && <H6 className="text-muted-foreground !font-normal pb-3 lg:max-w-[80%]">{t(content.description)}</H6>}
                    <div className="flex flex-col item-start lg:flex-row lg:items-center gap-6">
                        {content.buttonTxt && <Button className="w-full flex-wrap lg:w-fit">{t(content.buttonTxt)}</Button>}
                        {content.outlinedButton && <Button variant={"outline"} className="w-full flex-wrap lg:w-fit">
                            <S className="!text-[14px] !font-[500] !text-[#27272A] mt-[5px]">{t(content.outlinedButton)}</S>  <RightSVG />
                        </Button>}
                        {content?.isWatchVideo && (
                            <div className="lg:-mt-2.5">
                                <VideoPopup buttonText={t("Watch video")} className="h-0" videoSrc='/Dadycar  Le Meilleur Logiciel De Gestion De Flotte Automobile.mp4' />
                            </div>
                        )}
                    </div>
                    {content.showCompanies && <CustomImage alt="clients" pageTitle={metaTitles.defaultMeta_Title} src={ClientsLogos} className=" max-w-[580px] mt-4 max-lg:mx-auto max-md:max-w-[300px]" />}
                </div>
                {children}
            </div>
        </div>
    )
}

export default HeroSection