import { Button } from '@langgenius/dify-ui/button'
import * as React from 'react'
import { useTranslation } from 'react-i18next'
import { SearchMenu } from '@/app/components/base/icons/src/vender/knowledge'

type EmptySearchResultProps = {
  onResetKeywords: () => void
}

const EmptySearchResult = ({
  onResetKeywords,
}: EmptySearchResultProps & {
  className?: string
}) => {
  const { t } = useTranslation()

  return (
    <div className="flex size-full flex-col items-center justify-center gap-y-2 rounded-[10px] bg-background-section p-6">
      <SearchMenu className="size-8 text-text-tertiary" />
      <div className="system-sm-regular text-text-secondary">
        {t('onlineDrive.emptySearchResult', { ns: 'datasetPipeline' })}
      </div>
      <Button
        variant="secondary-accent"
        size="small"
        onClick={onResetKeywords}
        className="px-1.5"
      >
        <span className="px-[3px]">{t('onlineDrive.resetKeywords', { ns: 'datasetPipeline' })}</span>
      </Button>
    </div>
  )
}

export default React.memo(EmptySearchResult)