import React from 'react'

import { Space } from 'antd'
import { Link } from 'react-router-dom'

import { ClinicIcon } from '~/components/Icons'
import { useUserStore } from '~/hooks/state'

import { Avatar } from './Avatar'
import LanguageDropdown from './LanguageDropdown'
import QuickLinks from './QuickLinks'

interface HeaderProps {
  i18n?: boolean
}

const Header: React.FC<HeaderProps> = ({ i18n = false }) => {
  const internalUser = useUserStore((state) => state.user?.internal)
  return (
    <header
      className='flex-none flex bg-white shadow-sm'
      style={{ background: 'var(--cc-brand-color)' }}
    >
      <div className='flex justify-between items-center h-[56px] px-[24px] m-auto w-full max-w-[1440px]'>
        <Link to='/'>
          <ClinicIcon />
        </Link>
        <div className='flex items-center'>
          <Space size='large'>
            {internalUser && <QuickLinks theme='dark' />}
            {i18n && <LanguageDropdown placement='bottomCenter' />}
            <Avatar />
          </Space>
        </div>
      </div>
    </header>
  )
}

export { Header }