'use client'

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

type TextKey = 'name' | 'role' | 'bio' | 'availability'
type Props = { en: Resume; ru: Resume; portfolio: Portfolio; mailHref: string; showProjects: boolean }

export default function Hero({ en, ru, portfolio, mailHref, showProjects }: Readonly<Props>) {
  const hero = useRef<HTMLElement>(null)
  const text = (key: TextKey) => <Bi ru={ru[key] || en[key]} en={en[key]} />

  // 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} />
          <span>{text('availability')}</span>
        </p>
        <h1 className={styles.name}>{text('name')}</h1>
        <p className={styles.role}>{text('role')}</p>
        <p className={styles.bio}>{text('bio')}</p>
        <div className={styles.actions}>
          {showProjects && (
            <a className={`${styles.button} ${styles.primary}`} href="#projects"><Bi ru="Проекты" en="See projects" /></a>
          )}
          <a className={`${styles.button} ${showProjects ? styles.secondary : styles.primary}`} href={portfolio.href}>
            <Bi ru={portfolio.label ?? 'Всё портфолио'} en={portfolio.label ?? 'Full portfolio'} />
          </a>
          <a className={styles.link} href={mailHref}><Bi ru="Написать" en="Email me" /></a>
        </div>
      </div>
      <div className={styles.stage} aria-hidden="true">
        <div className={styles.floor}>
          <div className={styles.plane} />
        </div>
      </div>
    </section>
  )
}