"use client";

import { useState, type KeyboardEvent } from "react";

export function TagInput() {
  const [tags, setTags] = useState<string[]>(["editorial", "soft-mono"]);
  const [value, setValue] = useState("");

  function add(raw: string) {
    const t = raw.trim().toLowerCase();
    if (t && !tags.includes(t)) setTags((prev) => [...prev, t]);
    setValue("");
  }

  function onKey(e: KeyboardEvent<HTMLInputElement>) {
    if (e.key === "Enter" || e.key === ",") {
      e.preventDefault();
      add(value);
    } else if (e.key === "Backspace" && !value && tags.length) {
      setTags((prev) => prev.slice(0, -1));
    }
  }

  return (
    <div className="grid min-h-[200px] place-items-center bg-[#FAFAF8] p-12">
      <div className="w-full max-w-sm">
        <label className="mb-2 block font-mono text-[10px] uppercase tracking-[0.16em] text-[#6B6B66]">
          Tags
        </label>
        <div className="flex flex-wrap items-center gap-1.5 rounded-lg border border-[#1111111A] bg-[#FAFAF8] p-2 focus-within:border-[#11111144]">
          {tags.map((t) => (
            <span
              key={t}
              className="inline-flex items-center gap-1.5 rounded-full bg-[#2A3D2F] py-1 pl-3 pr-1.5 text-[12px] text-[#FAFAF8]"
            >
              {t}
              <button
                type="button"
                onClick={() => setTags((prev) => prev.filter((x) => x !== t))}
                className="grid h-4 w-4 place-items-center rounded-full bg-[#FAFAF8]/20 text-[11px] leading-none hover:bg-[#FAFAF8]/40"
                aria-label={`Remove ${t}`}
              >
                ×
              </button>
            </span>
          ))}
          <input
            value={value}
            onChange={(e) => setValue(e.target.value)}
            onKeyDown={onKey}
            placeholder={tags.length ? "" : "Add a tag…"}
            className="min-w-[80px] flex-1 bg-transparent px-1.5 py-1 text-[13px] text-[#111111] outline-none placeholder:text-[#6B6B66]/70"
          />
        </div>
        <p className="mt-2 font-mono text-[10px] text-[#6B6B66]">
          Press Enter or comma to add · Backspace to remove
        </p>
      </div>
    </div>
  );
}
Tag Input
