'use client'

import { useRef } from 'react'
import type { Portfolio, Resume } from '@/lib/types'
import styles from './hero.module.css'

type Props = { resume: Resume; portfolio: Portfolio; mailHref: string; showProjects: boolean }

export default function Hero({ resume, portfolio, mailHref, showProjects }: Readonly<Props>) {
  const hero = useRef<HTMLElement>(null)

  // The floor sways a couple of degrees with the pointer, like nudging the viewport.
  const onPointerMove = (event: React.PointerEvent) => {
    if (event.pointerType !== 'mouse' || !hero.current) return
    const offset = event.clientX / window.innerWidth - 0.5
    hero.current.style.setProperty('--sway', `${(offset * 3).toFixed(2)}deg`)
  }

  return (
    <section className={styles.hero} id="top" ref={hero} onPointerMove={onPointerMove}>
      <div className={styles.content}>
        <p className={styles.status}>
          <span className={styles.dot} />
          {resume.availability}
        </p>
        <h1 className={styles.name}>{resume.name}</h1>
        <p className={styles.role}>{resume.role}</p>
        <p className={styles.bio}>{resume.bio}</p>
        <div className={styles.actions}>
          {showProjects && <a className={`${styles.button} ${styles.primary}`} href="#projects">See projects</a>}
          <a className={`${styles.button} ${showProjects ? styles.secondary : styles.primary}`} href={portfolio.href} target="_blank" rel="noreferrer">
            Full portfolio
          </a>
          <a className={styles.link} href={mailHref}>Email me</a>
        </div>
      </div>
      <div className={styles.stage} aria-hidden="true">
        <div className={styles.floor}>
          <div className={styles.plane} />
        </div>
      </div>
    </section>
  )
}