"use client"

import { motion } from "framer-motion"

export interface CuisenaireRodProps {
  value: number
  color: string
  length: number // in vw or px
  draggable?: boolean
  onDrop?: (value: number) => void
}

const rodColors: Record<number, string> = {
  1: "#FFFFFF", // blanco
  2: "#E74C3C", // rojo
  3: "#2ECC71", // verde claro
  4: "#E91E63", // rosa
  5: "#F1C40F", // amarillo
  6: "#1ABC9C", // verde oscuro
  7: "#D35400", // naranja
  8: "#3498DB", // azul
  9: "#9B59B6", // púrpura
  10: "#FF5733", // naranja
}

const rodLengths: Record<number, number> = {
  1: 20,
  2: 40,
  3: 60,
  4: 80,
  5: 100,
  6: 120,
  7: 140,
  8: 160,
  9: 180,
  10: 200,
}

export { rodColors, rodLengths }

export function CuisenaireRod({ value, color, length, draggable = false }: CuisenaireRodProps) {
  return (
    <motion.div
      className="rounded-lg border border-border/50 shadow-sm touch-target cursor-grab active:cursor-grabbing"
      style={{
        width: `${length}px`,
        height: "40px",
        backgroundColor: color,
        borderColor: value === 1 ? "#ddd" : undefined,
      }}
      whileTap={{ scale: 1.05 }}
      drag={draggable}
      dragElastic={0.2}
      dragConstraints={{ left: -200, right: 200, top: -200, bottom: 200 }}
    />
  )
}