"use client";

import { useState } from "react";
import "./TrailColorPicker.css";
import { COLOR_PRESETS } from "@/data/colors";

interface TrailColorPickerProps {
  currentAccentColor: string;
  onColorChange: (accent: string, background: string) => void;
}

export function TrailColorPicker({ currentAccentColor, onColorChange }: TrailColorPickerProps) {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="TrailColorPicker-button"
        style={{ background: currentAccentColor }}
        title="change colors"
      />
      {isOpen && (
        <div className="TrailColorPicker-popup">
          <div className="TrailColorPicker-grid">
            {COLOR_PRESETS.map((preset, index) => (
              <button
                key={index}
                className={`TrailColorPicker-option ${currentAccentColor === preset.accent ? "TrailColorPicker-option--active" : ""}`}
                style={{ background: preset.accent }}
                onClick={() => {
                  onColorChange(preset.accent, preset.background);
                  setIsOpen(false);
                }}
                title={`Color ${index + 1}`}
              />
            ))}
          </div>
        </div>
      )}
    </>
  );
}
