import { useFormContext } from 'react-hook-form';
import { FieldError } from './FieldError';

type Props = {
  name: string;
  label: string;
  hint?: string;
};

const SUGGESTIONS = ['⚡', '🚀', '💼', '🎓', '🎧', '🛠️', '🎵', '💻', '📱', '🤖', '☁️', '🔥', '✨', '🎯', '🎨', '🌐'];

export function EmojiField({ name, label, hint }: Props) {
  const { register, setValue, watch } = useFormContext();
  const value = watch(name);

  return (
    <div>
      <label className="block">
        <span className="block font-mono text-xs uppercase tracking-widest text-[color:var(--color-cyan)] mb-1.5">
          {label}
        </span>
        {hint && (
          <span className="block font-mono text-[10px] text-[color:var(--color-text-dim)] mb-1.5">
            {hint}
          </span>
        )}
        <div className="flex items-center gap-2">
          <span className="text-2xl w-12 h-12 flex items-center justify-center bg-[color:var(--color-surface-2)] border border-[color:var(--color-border)] rounded">
            {value || '·'}
          </span>
          <input
            type="text"
            maxLength={4}
            {...register(name)}
            className="flex-1 bg-[color:var(--color-surface-2)] border border-[color:var(--color-border)] focus:border-[color:var(--color-cyan)] focus:outline-none p-2.5 rounded text-sm font-mono text-[color:var(--color-text)] transition-colors"
            placeholder="emoji ou caractère"
          />
        </div>
      </label>
      <div className="flex flex-wrap gap-1 mt-2">
        {SUGGESTIONS.map((s) => (
          <button
            key={s}
            type="button"
            onClick={() => setValue(name, s, { shouldDirty: true, shouldValidate: true })}
            className="w-8 h-8 flex items-center justify-center text-base hover:bg-[color:var(--color-surface-2)] rounded transition-colors"
          >
            {s}
          </button>
        ))}
      </div>
      <FieldError name={name} />
    </div>
  );
}
