Animated Checkbox

'use client'

import { useState } from 'react'
import { motion } from 'framer-motion'
import { Check } from 'lucide-react'

export function AnimatedCheckbox() {
  const [isChecked, setIsChecked] = useState(false)

  return (
    <div className="flex flex-col gap-4">
      {['Subscribe to newsletter', 'Agree to terms and conditions', 'Enable notifications'].map((label, index) => (
        <label key={label} className="flex cursor-pointer items-center gap-3">
          <motion.div
            className="relative flex h-6 w-6 items-center justify-center rounded border-2"
            style={{
              borderColor: index === 0 && isChecked ? 'rgb(var(--accent))' : 'rgb(var(--border))',
              backgroundColor: index === 0 && isChecked ? 'rgb(var(--accent))' : 'transparent',
            }}
            whileHover={{ scale: 1.1 }}
            whileTap={{ scale: 0.95 }}
            onClick={() => index === 0 && setIsChecked(!isChecked)}
          >
            <motion.div
              initial={false}
              animate={{
                scale: index === 0 && isChecked ? 1 : 0,
                opacity: index === 0 && isChecked ? 1 : 0,
              }}
              transition={{ type: 'spring', stiffness: 500, damping: 30 }}
            >
              <Check className="h-4 w-4 text-white" strokeWidth={3} />
            </motion.div>
          </motion.div>
          <span className="text-sm">{label}</span>
        </label>
      ))}
    </div>
  )
}