import { useState } from "react";
import { fontTransforms, transformText } from "@/components/fontTransforms";

export default function FancyTextPreview() {
  const [inputText, setInputText] = useState("Hello Instagram");
  const [copiedIndex, setCopiedIndex] = useState(null);

  const allFonts = Object.keys(fontTransforms);

  const handleCopy = async (text, index) => {
    try {
      await navigator.clipboard.writeText(text);
      setCopiedIndex(index);
      setTimeout(() => setCopiedIndex(null), 1500);
    } catch (err) {
      console.error("Copy failed:", err);
    }
  };

  return (
    <div className="max-w-3xl mx-auto p-4">
      <input
        type="text"
        className="w-full border rounded px-4 py-2 mb-6 text-lg"
        value={inputText}
        onChange={(e) => setInputText(e.target.value)}
        placeholder="Type something..."
      />

      <div className="space-y-6">
        {allFonts.map((fontName, index) => {
          const { transformed, fontClassName } = transformText(inputText, fontName);

          return (
            <div
              key={fontName}
              className="border-b pb-4 flex flex-col gap-2"
            >
              <p className="text-sm font-semibold text-gray-700">{fontName}</p>
              <div className="flex flex-col gap-1">
                {/* ⬇️ Normale Textvorschau mit Webfont */}
                <p className={`text-xl ${fontClassName}`}>
                  {inputText || "Hello Instagram"}
                </p>

                {/* ⬇️ Fancy Unicode-Text */}
                <p className="text-xl text-gray-600">
                  {transformed}
                </p>
              </div>

              <button
                className="self-start mt-1 text-sm bg-gray-200 hover:bg-gray-300 rounded px-3 py-1"
                onClick={() => handleCopy(transformed, index)}
              >
                {copiedIndex === index ? "Copied!" : "Copy"}
              </button>
            </div>
          );
        })}
      </div>
    </div>
  );
}