import { DadyCarSVG } from '@/assets/svg'
import { Button } from '@/components/ui/buttons/Button'
import { InfoCard } from '@/components/ui/cards'
import { CustomLine } from '@/components/ui/lines'
import AnimatedCustomLine from '@/components/ui/lines/AnimatedCustomLine'
import { IntegrationLine } from '@/components/ui/lines'
import { H3,  S } from '@/components/ui/typography'
import { useTranslations } from 'next-intl'
import React from 'react'

interface IIntegrationSection {

    content: {
        title: string,
        description?: string,
        link?: string,
        integrations: {
            icon: React.ReactNode,
            title: string,
            description: string
        }[]
    }
    hideOthers?: boolean
    icon?: React.ReactNode
}

const IntegrationSection = ({ content, hideOthers, icon }: IIntegrationSection) => {

    const t = useTranslations()
    return (
        <div className='flex flex-col justify-center items-center gap-16 xl:gap-60'>
            <div className='flex flex-col items-center gap-2 pb-16'>
                <H3 className='text-center'>{t(content.title)}</H3>
                {content.description && <S className='text-center text-muted-foreground'>{t(content.description)}</S>}
            </div>
            <div className=' min-h-[370px]'>
                {/* Dekstop */}
                <span className=' max-xl:hidden absolute w-[70px] h-[70px]   animate-customPing delay-700 bg-primary/20 rounded-full z-0'></span>
                <div className='hidden  shadow-lg  relative w-[70px] h-[70px] group  bg-primary rounded-lg z-10 xl:flex flex-col justify-center items-center'>
                    <div>
                        {icon ? icon : <DadyCarSVG className={"text-lightBackground shadow hover:shadow-xl duration-200 hover:scale-[1.1] "} />}
                    </div>
                    <AnimatedCustomLine delay={0} duration={2} height='53px' color={"#D4D4D8"} width='200px' dasharray='14' r={0} points={[{ x: 0, y: 0 }, { x: 100, y: 50 }, { x: 200, y: 50 }]} className='absolute bottom-[50px] right-[70px]' />
                    <InfoCard content={content.integrations[0]} className='absolute right-[270px] bottom-[100px]' />

                    <AnimatedCustomLine delay={3} duration={1.5} height='53px' color={"#D4D4D8"} width='200px' dasharray='14' r={0} points={[{ x: 0, y: 0 }, { x: 100, y: 50 }, { x: 200, y: 50 }]} className='absolute top-[50px] right-[70px] scale-y-[-1]' />
                    <InfoCard content={content.integrations[1]} className='absolute right-[270px] top-[100px]' />

                    <AnimatedCustomLine delay={10} duration={3} height='53px' color={"#D4D4D8"} width='200px' dasharray='14' r={0} points={[{ x: 0, y: 0 }, { x: 100, y: 50 }, { x: 200, y: 50 }]} className='absolute bottom-[50px] left-[70px] rotate-180 scale-y-[-1]' />
                    <InfoCard content={content.integrations[2]} className='absolute left-[270px] bottom-[100px]' />

                    <AnimatedCustomLine delay={7} duration={1.5} height='53px' color={"#D4D4D8"} width='200px' dasharray='14' r={0} points={[{ x: 0, y: 0 }, { x: 100, y: 50 }, { x: 200, y: 50 }]} className='absolute top-[50px] left-[70px] rotate-180' />
                    <InfoCard content={content.integrations[3]} className='absolute left-[270px] top-[100px]' />

                    {!hideOthers &&
                        <>
                            <IntegrationLine height='257px' color={"#D4D4D8"} width='5px' dasharray='14' r={0} points={[{ x: 1, y: 0 }, { x: 1, y: 255 }]} className='absolute top-[70px] left-[33px] rotate-180 scale-y-[-1]' ></IntegrationLine>
                            {content?.link ? <Button className='absolute bottom-[-300px]' link={content?.link}>{t("Check other integration")}</Button>
                                :
                                <Button variant={"outline"} url={process.env.NEXT_PUBLIC_PLATFORM_REGISTER_URL}  className='absolute bottom-[-300px] border-dashed border-[2.5px] cursor-default hover:bg-transparent'>{t("And bunch of integrations")}</Button>
                            }
                        </>
                    }
                </div>
                {/* Mobile */}
                <div className='xl:hidden flex flex-col items-center  relative gap-10  re'>
                    <div className='  w-[70px] h-[70px] bg-primary rounded-lg flex justify-center items-center'>
                       {icon ? icon :  <DadyCarSVG className={"text-lightBackground"} />}
                    </div>
                    <CustomLine height='720px' color={"#D4D4D8"} width='4px' dasharray='8' r={0} points={[{ x: 2, y: 0 }, { x: 2, y: 720 }]} className='absolute right-[49.3%] top-[70px]' />
                    <ul className='flex flex-col justify-center items-center gap-6 z-10'>
                        {content.integrations.map((integration, i) => (
                            <li key={i}>
                                <InfoCard content={integration} />
                            </li>
                        ))}
                    </ul>

                    
                    {!hideOthers &&
                        (
                            content?.link ? (
                                <Button className='mt-8 w-fit' link={content?.link}>
                                    {t("Check other integration")}
                                </Button>
                            ) : (
                                <Button variant={"outline"} link={content?.link} url={process.env.NEXT_PUBLIC_PLATFORM_REGISTER_URL} className='mt-8 w-fit border-dashed border-[2.5px] cursor-default hover:bg-white z-10 '>
                                    {t("And bunch of integrations")}
                                </Button>
                            )
                    )}
                </div>
            </div>
        </div>
    )
}

export default IntegrationSection