import SearchBox from './search-box'
import PluginTypeSwitch from './plugin-type-switch'
import IntersectionLine from './intersection-line'

const Header = () => {
  return (
    <>
      <h1 className='mb-2 text-center title-4xl-semi-bold text-text-primary'>
        Empower your AI development
      </h1>
      <h2 className='flex justify-center items-center mb-4 text-center body-md-regular text-text-tertiary'>
        Discover
        <span className="relative ml-1 body-md-medium text-text-secondary after:content-[''] after:absolute after:left-0 after:bottom-[1.5px] after:w-full after:h-2 after:bg-text-text-selected">
          models
        </span>
        ,
        <span className="relative ml-1 body-md-medium text-text-secondary after:content-[''] after:absolute after:left-0 after:bottom-[1.5px] after:w-full after:h-2 after:bg-text-text-selected">
          tools
        </span>
        ,
        <span className="relative ml-1 mr-1 body-md-medium text-text-secondary after:content-[''] after:absolute after:left-0 after:bottom-[1.5px] after:w-full after:h-2 after:bg-text-text-selected">
          extensions
        </span>
        and
        <span className="relative ml-1 mr-1 body-md-medium text-text-secondary after:content-[''] after:absolute after:left-0 after:bottom-[1.5px] after:w-full after:h-2 after:bg-text-text-selected">
          bundles
        </span>
        in Dify Marketplace
      </h2>
      <IntersectionLine />
      <div className='flex items-center justify-center mb-[15px]'>
        <SearchBox />
      </div>
      <PluginTypeSwitch />
    </>
  )
}

export default Header