import { useState } from "react"
import { motion } from "framer-motion"

export default function TwoBoxes(props) {
    const [showSecond, setShowSecond] = useState<boolean>(false)

    return (
        <div
            style={{
                display: "flex",
                flexDirection: "column",
                alignItems: "center",
                gap: 40,
                width: 400,
                height: 600,
                justifyContent: "center",
                ...props.style,
            }}
        >
            <motion.button
                layout
                onClick={() => setShowSecond((s) => !s)}
                style={{
                    padding: "4px 12px",
                    borderRadius: 4,
                    border: "1px solid #222222",
                    backgroundColor: "#DBDBDB",
                    color: "black",
                    fontSize: 14,
                    fontWeight: 400,
                    cursor: "pointer",
                }}
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
            >
                Animate
            </motion.button>

            <div
                style={{
                    position: "relative",
                    width: 300,
                    height: 300,
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                }}
            >
                {showSecond ? (
                    <motion.div
                        layoutId="box"
                        style={{
                            width: 64,
                            height: 64,
                            background: "#E9E9E9",
                            borderRadius: 12,
                        }}
                    />
                ) : (
                    <motion.div
                        layoutId="box"
                        style={{
                            width: 128,
                            height: 128,
                            background: "#D9D9D9",
                            borderRadius: 12,
                        }}
                    />
                )}
            </div>
        </div>
    )
}