"use client"

import type React from "react"

import { useState } from "react"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"

interface ColorPickerProps {
  color: string
  onChange: (color: string) => void
}

const predefinedColors = [
  "#000000",
  "#ffffff",
  "#ff0000",
  "#00ff00",
  "#0000ff",
  "#ffff00",
  "#00ffff",
  "#ff00ff",
  "#c0c0c0",
  "#808080",
  "#800000",
  "#808000",
  "#008000",
  "#800080",
  "#008080",
  "#000080",
  "#ff8080",
  "#80ff80",
  "#8080ff",
  "#ffa500",
]

export default function ColorPicker({ color, onChange }: ColorPickerProps) {
  const [inputColor, setInputColor] = useState(color)

  const handleColorChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInputColor(e.target.value)
    onChange(e.target.value)
  }

  const handlePredefinedColorClick = (color: string) => {
    setInputColor(color)
    onChange(color)
  }

  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline" className="w-10 h-10 p-0 border-2" style={{ backgroundColor: color }} />
      </PopoverTrigger>
      <PopoverContent className="w-64">
        <div className="space-y-4">
          <div className="grid grid-cols-5 gap-2">
            {predefinedColors.map((c) => (
              <button
                key={c}
                className="w-8 h-8 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary"
                style={{ backgroundColor: c }}
                onClick={() => handlePredefinedColorClick(c)}
              />
            ))}
          </div>
          <div className="flex items-center space-x-2">
            <Input type="color" value={inputColor} onChange={handleColorChange} className="w-10 h-10 p-0 border-0" />
            <Input type="text" value={inputColor} onChange={handleColorChange} className="flex-1" />
          </div>
        </div>
      </PopoverContent>
    </Popover>
  )
}