"use client"

import { motion } from "motion/react"
import { useState } from "react"

function Item({ label, number }: { label: string; number: number }) {
    const [isHovered, setIsHovered] = useState(false)

    const content = (
        <>
            <span style={numberLabel}>0{number}</span>
            {label}
        </>
    )

    return (
        <motion.li
            style={{
                ...item,
                justifyContent: isHovered ? "flex-end" : "flex-start",
            }}
            onHoverStart={() => setIsHovered(true)}
            onHoverEnd={() => setIsHovered(false)}
        >
            <motion.span layout style={text}>
                {content}
            </motion.span>
            <motion.span layout style={text} aria-hidden>
                {content}
            </motion.span>
        </motion.li>
    )
}

export default function TextReveal() {
    return (
        <ul style={list}>
            <Item label="Home" number={1} />
            <Item label="Photos" number={2} />
            <Item label="Contact" number={3} />
        </ul>
    )
}

/**
 * ==============   Styles   ================
 */

const list = {
    display: "flex",
    gap: 20,
    listStyle: "none",
    padding: 0,
    margin: 0,
    flexDirection: "column",
} as const

const item = {
    position: "relative",
    cursor: "pointer",
    overflow: "hidden",
    display: "flex",
    flexDirection: "column",
    alignItems: "flex-start",
    gap: 10,
    height: 32,
} as const

const text = {
    color: "#f5f5f5",
    fontSize: 32,
    fontWeight: "bold",
    textTransform: "uppercase",
    display: "flex",
    alignItems: "center",
    gap: 10,
    lineHeight: "32px",
} as const

const numberLabel = {
    fontSize: 32,
    fontWeight: "bold",
    textTransform: "uppercase",
    opacity: 0.5,
    fontVariantNumeric: "tabular-nums",
} as const