import React from 'react'

import clsx from 'clsx'

import EmptyResultSVG from './empty-result.svg'

type EmptyResultProps = {
  title?: string
  subTitle?: string
}

const EmptyResult: React.FC<
  React.HTMLAttributes<HTMLDivElement> & EmptyResultProps
> = ({ title, subTitle, className }) => {
  return (
    <div className={clsx('flex flex-col items-center p-4', className)}>
      <span className='text-xl text-[#2c2c2c] mb-2'>
        {title ?? 'Nothing turned up'}
      </span>
      <span className='text-sm text-[#2c2c2c] opacity-60 mb-12'>
        {subTitle ?? 'Try using different name'}
      </span>
      <EmptyResultSVG />
    </div>
  )
}

export default EmptyResult