import { Link } from 'react-router'

import { Button } from '~/components/ui/button'
import { APP } from '~/data/meta'

export const HeaderTop = () => {
  return (
    <div className="flex h-[100px] items-center justify-between gap-[15px] bg-white px-[50px] py-[20px]">
      <Link
        to="/news"
        className="h-full py-[5px]"
      >
        <img
          src={APP.logo}
          alt={APP.title}
          className="h-full w-auto"
        />
      </Link>
      <div className="flex h-full items-center py-1.5 font-light whitespace-pre-line">
        {APP.description}
      </div>
      <div className="flex items-center gap-[15px]">
        <Button>About Us</Button>
        <Button variant="newsSecondary">Akun</Button>
        <div className="w-[60px]">
          <img
            alt="language"
            src="/flags/id.svg"
            className="shadow-sm"
          />
        </div>
      </div>
    </div>
  )
}