import { NextPage } from 'next'
import dynamic from 'next/dynamic'
import { NextSeo } from 'next-seo'

import { botCategories, botCategoryIcon } from '@utils/Constants'

const Container = dynamic(() => import('@components/Container'))
const Advertisement = dynamic(() => import('@components/Advertisement'))
const Tag = dynamic(() => import('@components/Tag'))
const Segment = dynamic(() => import('@components/Segment'))

const Categories: NextPage = () => {
	return (
		<Container paddingTop>
			<NextSeo title='전체 카테고리' description='한국 디스코드 리스트의 전체 카테고리입니다.' />
			<h1 className='mb-5 mt-2 text-2xl font-bold'>전체 카테고리</h1>
			<Segment className='mb-10'>
				<div className='mt-1.5 flex flex-wrap text-center'>
					{botCategories.map((t) => (
						<Tag
							key={t}
							text={
								<>
									{{
										'빗금 명령어': (
											<span
												className='fa-stack'
												style={{
													fontSize: '1em',
													height: '1.2em',
													lineHeight: '1em',
													width: '20px',
													verticalAlign: 'middle',
												}}
											>
												<i className='fas fa-square fa-stack-1x fa-md' />
												<i
													className='fas fa-slash fa-rotate-90 fa-xs fa-stack-1x fa-inverse'
													style={{ fontSize: '0.3rem' }}
												/>
											</span>
										),
									}[t] ?? <i className={botCategoryIcon[t]} />}{' '}
									{t}
								</>
							}
							href={`/bots/categories/${t}`}
							dark
							bigger
						/>
					))}
				</div>
			</Segment>
			<Advertisement />
		</Container>
	)
}

export default Categories
