"use client"

import React, { useState } from "react"
import { cn } from "../../lib/utils"

interface MoonUIColorPickerProProps {
  value?: string
  onChange?: (color: string) => void
  className?: string
  showInput?: boolean
  showPresets?: boolean
  size?: string
  presets?: string[]
}

const defaultColors = [
  "#000000", "#374151", "#EF4444", "#F97316", 
  "#F59E0B", "#EAB308", "#22C55E", "#10B981",
  "#06B6D4", "#3B82F6", "#6366F1", "#8B5CF6",
  "#A855F7", "#D946EF", "#EC4899", "#F43F5E"
]

// React 19 compatible - removed forwardRef
export const MoonUIColorPickerPro = ({ 
  value = "#000000", 
  onChange, 
  className, 
  showInput = false,
  showPresets = true,
  size = "default",
  presets = defaultColors
}: MoonUIColorPickerProProps) => {
  const [currentColor, setCurrentColor] = useState(value)

  const handleColorChange = (color: string) => {
    setCurrentColor(color)
    onChange?.(color)
  }

  const sizeClasses = {
    sm: "w-6 h-6",
    default: "w-8 h-8", 
    lg: "w-10 h-10"
  }

  return (
    <div className={cn("flex flex-col gap-2", className)}>
      {showInput && (
        <div className="flex gap-2 items-center">
          <input
            type="color"
            value={currentColor}
            onChange={(e) => handleColorChange(e.target.value)}
            className={cn("rounded border cursor-pointer", sizeClasses[size as keyof typeof sizeClasses] || sizeClasses.default)}
          />
          <input
            type="text"
            value={currentColor}
            onChange={(e) => handleColorChange(e.target.value)}
            className="px-2 py-1 border rounded text-sm font-mono"
            placeholder="#000000"
          />
        </div>
      )}
      
      {!showInput && (
        <input
          type="color"
          value={currentColor}
          onChange={(e) => handleColorChange(e.target.value)}
          className={cn("rounded border cursor-pointer", sizeClasses[size as keyof typeof sizeClasses] || sizeClasses.default)}
        />
      )}

      {showPresets && presets && presets.length > 0 && (
        <div className="flex flex-wrap gap-1">
          {presets.map((color) => (
            <button
              key={color}
              type="button"
              onClick={() => handleColorChange(color)}
              className={cn(
                "w-6 h-6 rounded border-2 hover:scale-110 transition-transform",
                currentColor === color ? "border-gray-900 dark:border-gray-100" : "border-transparent"
              )}
              style={{ backgroundColor: color }}
            />
          ))}
        </div>
      )}
    </div>
  )
}

// Backward compatibility exports
export { MoonUIColorPickerPro as ColorPicker }
export default MoonUIColorPickerPro