"use client"
import React, { useState } from 'react'
import { useTranslations } from 'next-intl'
import { H2, H6, P } from '@/components/ui/typography'
import { ParticlesSVG } from '@/assets/svg'
import { useRouter } from 'next/navigation'
import { Button } from '@/components/ui/buttons/Button'

const BlogHero = () => {
    const t = useTranslations()
    const router = useRouter()
    const [searchQuery, setSearchQuery] = useState('')

    const handleSearch = () => {
        console.log(searchQuery)
        router.push(`/blog?search=${encodeURIComponent(searchQuery)}`)
    }

    const handleKeyDown = (e: React.KeyboardEvent) => {
        if (e.key === 'Enter') {
            console.log("qsd")
            handleSearch()
        }
    }

    return (
        <main className="flex flex-col px-2 justify-center items-center gap-10 bg-lightBackground py-32 relative overflow-hidden">
            <ParticlesSVG className={"max-lg:hidden absolute right-48 bottom-14  scale-[2] z-[0]"} />
            <ParticlesSVG className={"absolute left-0 top-0 sm:top-8  lg:left-48 lg:top-14  scale-[-1] sm:scale-[-1.5] lg:scale-[-2]  z-[0]"} />
            <div className='flex flex-col gap-2 items-center text-center z-[1]'>
                <H6 className='text-primary'>{t("Dadycar Blog")}</H6>
                <H2 className=''>{t("Blogs Written by our professional team")}</H2>
                <P className=''>{t("Latest news, interviews, technology and resources")}</P>
            </div>
            <div className='z-[1] flex gap-2 w-full max-w-md'>
                <input
                    type="text"
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                    onKeyDown={handleKeyDown}
                    placeholder={t("Search articles")}
                    className="flex-1 px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary"
                />
                <Button url='' onClick={handleSearch}>{t("Search")}</Button>
            </div>
        </main>
    )
}

export default BlogHero