import type { ReactNode } from 'react'
import { Link } from 'react-router'

import { LeftArrow } from '~/components/icons/left-arrow'
import { APP } from '~/data/meta'

type THeaderModal = {
  typeForm?: string
  titleForm?: string
  children: ReactNode
}
export default function HeaderModal({ typeForm, children }: THeaderModal) {
  return (
    <>
      <div className="absolute top-0 left-0 lg:hidden">
        <Link
          to="/#"
          className="mt-2 h-full py-2"
        >
          <LeftArrow
            width={'50px'}
            height={'50px'}
          />
        </Link>
      </div>
      <div className="w-full max-w-md">
        <div className="mb-6 flex justify-center">
          <Link to="/news">
            <img
              src={APP.logo}
              alt={APP.title}
              className="h-[80px]"
            />
          </Link>
        </div>

        <div className="mb-4 p-4 text-center text-[#565658]">
          {children}
          <p>{typeForm}</p>
        </div>
      </div>
    </>
  )
}