"use client"

import * as Switch from "@radix-ui/react-switch"
import { motion } from "motion/react"
import { useState } from "react"

function RadixSwitch() {
    const [checked, setChecked] = useState(false)

    return (
        <div style={styles.container}>
            <Switch.Root checked={checked} onCheckedChange={setChecked} asChild>
                <motion.button
                    style={{
                        ...styles.switch,
                        justifyContent: checked ? "flex-end" : "flex-start",
                    }}
                    initial={false}
                    animate={{
                        backgroundColor: checked
                            ? "#8df0cc"
                            : "var(--hue-6-transparent)",
                    }}
                    whileFocus={{
                        boxShadow:
                            "0 0 0 5px #0f1115, 0 0 0 10px var(--hue-6-transparent)",
                        transition: { duration: 0.2 },
                    }}
                >
                    <Switch.Thumb asChild>
                        <motion.div
                            style={styles.thumb}
                            layout
                            transition={{
                                type: "spring",
                                stiffness: 500,
                                damping: 30,
                            }}
                        />
                    </Switch.Thumb>
                </motion.button>
            </Switch.Root>
        </div>
    )
}

// Styles
const styles = {
    container: {
        display: "flex",
        alignItems: "center",
    },
    switch: {
        width: 100,
        padding: 10,
        backgroundColor: "#666666",
        borderRadius: 9999,
        position: "relative",
        outline: "none",
        cursor: "pointer",
        display: "flex",
    },
    thumb: {
        display: "block",
        width: 50,
        height: 50,
        backgroundColor: "#f5f5f5",
        borderRadius: "50%",
    },
    label: {
        color: "#f5f5f5",
        fontSize: 15,
        lineHeight: 1,
        paddingLeft: 15,
    },
} as const

export default RadixSwitch