"use client"

import * as React from "react"
import { Input } from "./input"
import { cn } from "@/lib/utils"

interface ColorPickerProps {
  value?: string
  onChange?: (value: string) => void
  className?: string
}

export function ColorPicker({ value = "#000000", onChange, className }: ColorPickerProps) {
  return (
    <div className={cn("flex items-center space-x-2", className)}>
      <Input
        type="color"
        value={value}
        onChange={(e) => onChange?.(e.target.value)}
        className="w-12 h-8 p-1 border rounded"
      />
      <Input
        value={value}
        onChange={(e) => onChange?.(e.target.value)}
        className="flex-1 text-xs font-mono"
        placeholder="#000000"
      />
    </div>
  )
}
