// import { styled } from 'solid-styled-components'

import useLanguage from '@hooks/useLanguage'
import { Flex, Icon, Text } from '@hope-ui/solid'
import { A } from '@solidjs/router'
import { IconDashboard } from '@tabler/icons-solidjs'
import { For } from 'solid-js'

const language = useLanguage('vi')

const NAVBAR_ITEM = [
  {
    path: '/dashboard',
    icon: IconDashboard,
    text: language?.dashboard,
  },
]

export default function Navbar() {
  return (
    <div class="navbar">
      <For each={NAVBAR_ITEM}>
        {(item) => (
          <A href={item.path}>
            <Flex padding="$5" alignItems="center">
              <Icon as={item.icon} boxSize="$6" mr="$2_5" />
              <Text size="lg">{item.text}</Text>
            </Flex>
          </A>
        )}
      </For>
    </div>
  )
}