JSON Formatter

import { useState } from "react";
import { Textarea } from "@/components/ui/textarea";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Copy, Check, Minimize2, Maximize2 } from "lucide-react";

export default function JsonFormatter() {
    const [input, setInput] = useState("");
    const [output, setOutput] = useState("");
    const [error, setError] = useState("");
    const [copied, setCopied] = useState(false);
    const [indent, setIndent] = useState(2);

    const format = () => {
        try {
            const parsed = JSON.parse(input);
            setOutput(JSON.stringify(parsed, null, indent));
            setError("");
        } catch (e: any) {
            setError(e.message);
            setOutput("");
        }
    };

    const minify = () => {
        try {
            const parsed = JSON.parse(input);
            setOutput(JSON.stringify(parsed));
            setError("");
        } catch (e: any) {
            setError(e.message);
            setOutput("");
        }
    };

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

    return (
        <div className="space-y-4">
            <Textarea
                placeholder='Paste your JSON here... e.g. {"name": "John", "age": 30}'
                value={input}
                onChange={(e) => setInput(e.target.value)}
                className="min-h-[160px] resize-y font-mono text-sm"
            />
            <div className="flex flex-wrap items-center gap-3">
                <Button onClick={format}>
                    <Maximize2 className="mr-2 h-4 w-4" />
                    Format
                </Button>
                <Button variant="outline" onClick={minify}>
                    <Minimize2 className="mr-2 h-4 w-4" />
                    Minify
                </Button>
                <div className="flex items-center gap-2">
                    <span className="text-sm text-muted-foreground">Indent:</span>
                    {[2, 4].map((n) => (
                        <Button
                            key={n}
                            variant={indent === n ? "default" : "outline"}
                            size="sm"
                            onClick={() => setIndent(n)}
                        >
                            {n}
                        </Button>
                    ))}
                </div>
            </div>
            {error && (
                <div className="rounded-lg border border-destructive/50 bg-destructive/10 p-3">
                    <p className="text-sm text-destructive font-mono">{error}</p>
                </div>
            )}
            {output && (
                <div className="relative rounded-lg border bg-muted/50 p-4">
                    <pre className="overflow-x-auto whitespace-pre 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>
    );
}