'use client'
import { H1, P } from '@/components/ui/typography'
import { useLocale } from 'next-intl'
import { useRouter, useSearchParams } from 'next/navigation'
import React from 'react'
interface Props {
    item: {
        id: number,
        name_en: string,
        name_fr: string,
        slug_en: string,
        slug_fr: string,
        category_en: string,
        category_fr: string,
        innovation: boolean,
        priority: string,
        summary_en: string,
        summary_fr: string,
        question_en: string,
        question_fr: string,
        content_en: string,
        content_fr: string,
        keywords: {
            keyword_en: string,
            keyword_fr: string,
        }[],
        relatedTerms: {
            name_en: string,
            name_fr: string,
            slug_en: string,
            slug_fr: string,
        }[],
    },
}

const GlossaryItem: React.FC<Props> = ({ item }) => {
    const router = useRouter()
    const searchParams = useSearchParams()
    const category = searchParams.get('category')
    const locale = useLocale();

    const goToDetailsPage = () => {
        if (category) {
            if (locale === "en") {
                router.push(`/en/glossary/${item.slug_en}`)
            } else {
                router.push(`/glossaire/${item.slug_fr}`)
            }
        } else {
            if (locale === "en") {
                router.push(`/en/glossary/${item.slug_en}`)
            } else {
                router.push(`/glossaire/${item.slug_fr}`)
            }
        }
    }

    return (
        <div className='w-full'>
            <div className='flex items-center gap-3'>
                <div className='w-[40px] h-[40px] rounded-full flex items-center justify-center glossary-item-linear-bg'>
                    <P className='!text-[18px] text-white font-[700]'>{locale === "en" ? item?.name_en?.charAt(0) : item?.name_fr?.charAt(0)}</P>
                </div>
                <P className='!text-[24px] text-[#27272A] font-[600]'>{locale === "en" ? item?.name_en?.charAt(0) : item?.name_fr?.charAt(0)}</P>
            </div>
            <div className='w-full h-[2px] bg-[#E2E8F0] mt-2 mb-4' />
            <div className='border-[1px] border-[#E2E8F0] rounded-[12px] pt-[25px] px-[25px] pb-[41px] cursor-pointer' onClick={goToDetailsPage}>
                {item?.innovation && (
                    <div className='px-[9px] py-[5px] bg-[#07D0C133] border-[1px] botder-[#07D0C133] rounded-[6px] w-fit mb-4 lg:mb-2'>
                        <P className='!text-[12px] text-[#00776E] font-[500]'>Innovation</P>
                    </div>
                )}
                <H1 className='!text-[20px] !font-[600] !text-[#27272A]'>{locale === "en" ? item?.name_en : item?.name_fr}</H1>
                <P className='!text-[16px] !text-[#71717A] !font-[400] mt-2 lg:mt-0'>{locale === "en" ? item?.summary_en : item?.summary_fr}</P>
            </div>
        </div>
    )
}

export default GlossaryItem