import React from 'react'

type Props = {}

export default function Header({}: Props) {
  const links = [
    {
      label: 'About',
      link: '/about',
    },
    {
      label: 'Services',
      link: '/services',
    },
    {
      label: 'Contact',
      link: '/contact',
    },
  ]

  return (
    <header className="flex justify-between py-6">
      <div>
        <a href="/" className="decoration-transparent">
          <span className="text-2xl font-extrabold ">Logo</span>
        </a>
      </div>
      <nav>
        <ul className="flex gap-4 font-bold list-none">
          {links.map((item, index) => (
            <li className="decoration-transparent" key={`link-${index}`}>
              <a href={item.link}>{item.label}</a>
            </li>
          ))}
        </ul>
      </nav>
    </header>
  )
}