"use client"

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

function Switch() {
    const [isOn, setIsOn] = useState(false)

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

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

export default function LayoutAnimation() {
    return (
        <div style={container}>
            <Switch />
            <Switch />
            <Switch />
            <Switch />
            <Switch />
            <Switch />
        </div>
    )
}

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

const container: React.CSSProperties = {
    display: "flex",
    width: 300,
    gap: 20,
    flexWrap: "wrap",
}

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

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