import { FeaturesCarousel } from '@/components/ui/carousel'
import { H2} from '@/components/ui/typography'
import ArrowText from '@/components/ui/typography/ArrowText'
import { useTranslations } from 'next-intl'
import React from 'react'

interface IDiscoverFeaturesSection {
    content: {
        title: string,
        link?: string,
        features: {
            icon: React.ReactNode,
            title: string,
            description: string,
            link: string
        }[]
    }
}
const DiscoverFeaturesSection = ({ content }: IDiscoverFeaturesSection) => {
    const t = useTranslations()
    return (
        <section className='flex flex-col justify-center items-center gap-8 lg:gap-[72px]'>
            <div className='flex flex-col lg:flex-row items-center lg:gap-10 max-lg:text-center'>
                <H2>{t(content.title)}</H2>
                <ArrowText link={content.link} className='pt-2 text-nowrap'>{t("View All")}</ArrowText>
            </div>
            <FeaturesCarousel elements={content.features} />
        </section>
    )
}

export default DiscoverFeaturesSection