URL Encoder / Decoder

import { useState } from "react";
import { Textarea } from "@/components/ui/textarea";
import { Button } from "@/components/ui/button";
import { Copy, Check, ArrowDown, ArrowUp } from "lucide-react";

export default function UrlCodec() {
    const [input, setInput] = useState("");
    const [output, setOutput] = useState("");
    const [mode, setMode] = useState<"encode" | "decode">("encode");
    const [error, setError] = useState("");
    const [copied, setCopied] = useState(false);

    const process = () => {
        try {
            if (mode === "encode") {
                setOutput(encodeURIComponent(input));
            } else {
                setOutput(decodeURIComponent(input));
            }
            setError("");
        } catch {
            setError("Invalid input for " + mode + "ing");
            setOutput("");
        }
    };

    const copyOutput = async () => {
        await navigator.clipboard.writeText(output);
        setCopied(true);
        setTimeout(() => setCopied(false), 1500);
    };

    return (
        <div className="space-y-4">
            <div className="flex gap-2">
                <Button
                    variant={mode === "encode" ? "default" : "outline"}
                    onClick={() => setMode("encode")}
                >
                    Encode
                </Button>
                <Button
                    variant={mode === "decode" ? "default" : "outline"}
                    onClick={() => setMode("decode")}
                >
                    Decode
                </Button>
            </div>
            <Textarea
                placeholder={
                    mode === "encode"
                        ? "Enter URL or text to encode..."
                        : "Enter URL-encoded string to decode..."
                }
                value={input}
                onChange={(e) => setInput(e.target.value)}
                className="min-h-[120px] resize-y font-mono text-sm"
            />
            <Button onClick={process}>
                {mode === "encode" ? (
                    <ArrowDown className="mr-2 h-4 w-4" />
                ) : (
                    <ArrowUp className="mr-2 h-4 w-4" />
                )}
                {mode === "encode" ? "Encode" : "Decode"}
            </Button>
            {error && (
                <div className="rounded-lg border border-destructive/50 bg-destructive/10 p-3">
                    <p className="text-sm text-destructive">{error}</p>
                </div>
            )}
            {output && (
                <div className="relative rounded-lg border bg-muted/50 p-4">
                    <pre className="overflow-x-auto whitespace-pre-wrap break-all text-sm font-mono">
                        {output}
                    </pre>
                    <Button
                        variant="ghost"
                        size="icon"
                        className="absolute top-2 right-2"
                        onClick={copyOutput}
                    >
                        {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
                    </Button>
                </div>
            )}
        </div>
    );
}