"use client"

import { aboutState } from "@/recoil"
import Image from "next/image"
import Link from "next/link"
import { useSetRecoilState } from "recoil"

type Props = {
  className?: string
}

export default function LayoutHeader({ className }: Props) {
  const openAbout = useSetRecoilState(aboutState)

  return (
    <div className={`flex items-center justify-between w-full max-w-md sticky top-0 left-0 z-10 mx-auto bg-white lg:hidden ${className}`}>
      <Image
        src="/wizzor2x.png"
        alt="wizzor"
        width={100}
        height={100}
      />
      <Link
        href="#"
        scroll={false}
        onClick={() => openAbout(true)}
        className="font-semibold hover:text-[#db9a1d] inline-flex bg-[var(--primary--20)] text-sm px-6 py-3 rounded-full">
        About Wizzor
      </Link>
    </div>
  )
}