import { useState } from 'react';

interface Option { value: string; label: string; color: string; }

interface EditableSelectProps {
  value: string;
  options: Option[];
  onSave: (val: string) => void;
  className?: string;
}

export function EditableSelect({ value, options, onSave, className = '' }: EditableSelectProps) {
  const [editing, setEditing] = useState(false);
  const current = options.find(o => o.value === value);

  if (editing) {
    return (
      <select
        autoFocus
        value={value}
        onChange={(e) => { onSave(e.target.value); setEditing(false); }}
        onBlur={() => setEditing(false)}
        className={`rounded px-2 py-1 text-sm border border-gray-300 outline-none ${className}`}
      >
        {options.map(o => (
          <option key={o.value} value={o.value}>{o.label}</option>
        ))}
      </select>
    );
  }

  return (
    <span
      onClick={() => setEditing(true)}
      title="클릭하여 변경"
      className={`cursor-pointer hover:opacity-80 transition-opacity ${current?.color ?? ''} ${className}`}
    >
      {current?.label ?? value}
    </span>
  );
}
