import type { FC } from 'react'
import { memo } from 'react'
import { useTranslation } from 'react-i18next'
import type { OnSend } from '../types'
import { Star04 } from '@/app/components/base/icons/src/vender/solid/shapes'
import Button from '@/app/components/base/button'

type TryToAskProps = {
  suggestedQuestions: string[]
  onSend: OnSend
}
const TryToAsk: FC<TryToAskProps> = ({
  suggestedQuestions,
  onSend,
}) => {
  const { t } = useTranslation()

  return (
    <div>
      <div className='flex items-center mb-2.5 py-2'>
        <div
          className='grow h-[1px]'
          style={{
            background: 'linear-gradient(270deg, #F3F4F6 0%, rgba(243, 244, 246, 0) 100%)',
          }}
        />
        <div className='shrink-0 flex items-center px-3 text-gray-500'>
          <Star04 className='mr-1 w-2.5 h-2.5' />
          <span className='text-xs text-gray-500 font-medium'>{t('appDebug.feature.suggestedQuestionsAfterAnswer.tryToAsk')}</span>
        </div>
        <div
          className='grow h-[1px]'
          style={{
            background: 'linear-gradient(270deg, rgba(243, 244, 246, 0) 0%, #F3F4F6 100%)',
          }}
        />
      </div>
      <div className='flex flex-wrap justify-center'>
        {
          suggestedQuestions.map((suggestQuestion, index) => (
            <Button
              key={index}
              variant='secondary-accent'
              className='mb-2 mr-2 last:mr-0'
              onClick={() => onSend(suggestQuestion)}
            >
              {suggestQuestion}
            </Button>
          ))
        }
      </div>
    </div>
  )
}

export default memo(TryToAsk)