"use client"

import { Switch } from "@base-ui-components/react/switch"
import { motion } from "motion/react"
import { useState } from "react"

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

    return (
        <div style={styles.container}>
            <Switch.Root
                checked={checked}
                onCheckedChange={setChecked}
                className="switch-root"
                render={
                    <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
                            render={
                                <motion.div
                                    style={styles.thumb}
                                    layout
                                    transition={{
                                        type: "spring",
                                        stiffness: 500,
                                        damping: 30,
                                    }}
                                />
                            }
                        />
                    </motion.button>
                }
            />
        </div>
    )
}

const styles = {
    container: {
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        minHeight: "200px",
    },
    switch: {
        width: 100,
        padding: 10,
        backgroundColor: "#666666",
        borderRadius: 9999,
        position: "relative",
        outline: "none",
        cursor: "pointer",
        display: "flex",
    },
    thumb: {
        width: 50,
        height: 50,
        backgroundColor: "#f5f5f5",
        borderRadius: "50%",
        boxShadow: "0 1px 3px rgba(0, 0, 0, 0.1)",
    },
} as const

export default BaseSwitch