"use client"

import {
    startTransition,
    useState,
    unstable_ViewTransition as ViewTransition,
} from "react"

export default function LayoutAnimation() {
    const [isOn, setIsOn] = useState(false)

    const toggleSwitch = () => startTransition(() => setIsOn(!isOn))

    return (
        <button
            className="toggle-container"
            style={{
                ...container,
                justifyContent: "flex-" + (isOn ? "end" : "start"),
            }}
            onClick={toggleSwitch}
        >
            <ViewTransition>
                <div className="toggle-handle" style={handle} />
            </ViewTransition>
        </button>
    )
}

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

const container = {
    width: 100,
    height: 50,
    backgroundColor: "var(--hue-3-transparent)",
    borderRadius: 50,
    cursor: "pointer",
    display: "flex",
    padding: 10,
}

const handle = {
    width: 50,
    height: 50,
    backgroundColor: "#9911ff",
    borderRadius: "50%",
}