import type { NextPage } from 'next'
import Link from 'next/link'
import { FC, ReactNode } from 'react'

interface CtaLinkProps {
  page: string
  children?: ReactNode
}
const CtaLink: FC<CtaLinkProps> = (props) => (
  <Link href={props.page}>
    <a className="underline hover:text-gray-200">{props.children}</a>
  </Link>
)

const Home: NextPage = () => {
  return (
    <div className="flex min-h-screen flex-col items-center justify-center bg-pink-400">
      <main className="flex flex-col items-center space-y-8">
        <h1 className="text-6xl">Wishes</h1>
        <div className="space-x-3">
          <CtaLink page="/sign-up">Create account</CtaLink>
          <span>or</span>
          <CtaLink page="/sign-in">Login</CtaLink>
        </div>
      </main>
    </div>
  )
}

export default Home