'use client'

import React from 'react'
import GlossaryItem from './GlossaireItem'
import { useLocale } from 'next-intl'

interface GlossaryTerm {
  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
  }[]
}

interface Props {
  glossaries: GlossaryTerm[]
}

const GlossaireItems: React.FC<Props> = ({ glossaries }) => {
  const locale = useLocale()

  if (!glossaries || glossaries.length === 0) {
    return (
      <div className='flex-1 flex flex-col items-center justify-center bg-white border-[1px] border-[#E4E4E7] rounded-[16px] py-[56px] px-[24px]'>
        <p className='text-[18px] text-[#71717A] font-[400]'>
          {locale === 'en' 
            ? 'No terms found matching your search criteria.' 
            : 'Aucun terme trouvé correspondant à vos critères de recherche.'}
        </p>
      </div>
    )
  }

  return (
    <div className='flex-1 flex flex-col items-start gap-8 bg-white border-[1px] border-[#E4E4E7] rounded-[16px] pt-[24px] px-[24px] pb-[56px] h-fit'>
      {glossaries.map((item, index) => (
        <GlossaryItem key={item.id || index} item={item} />
      ))}
    </div>
  )
}

export default GlossaireItems