Hash Generator

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, Hash } from "lucide-react";

async function hashText(text: string, algo: string): Promise<string> {
    const data = new TextEncoder().encode(text);
    const hash = await crypto.subtle.digest(algo, data);
    return Array.from(new Uint8Array(hash))
        .map((b) => b.toString(16).padStart(2, "0"))
        .join("");
}

const ALGORITHMS = [
    { label: "MD5", algo: "MD5", supported: false },
    { label: "SHA-1", algo: "SHA-1", supported: true },
    { label: "SHA-256", algo: "SHA-256", supported: true },
    { label: "SHA-384", algo: "SHA-384", supported: true },
    { label: "SHA-512", algo: "SHA-512", supported: true },
];

export default function HashGenerator() {
    const [input, setInput] = useState("");
    const [results, setResults] = useState<{ label: string; hash: string }[]>([]);
    const [copied, setCopied] = useState("");
    const [loading, setLoading] = useState(false);

    const generate = async () => {
        if (!input) return;
        setLoading(true);
        const hashes = await Promise.all(
            ALGORITHMS.filter((a) => a.supported).map(async (a) => ({
                label: a.label,
                hash: await hashText(input, a.algo),
            }))
        );
        setResults(hashes);
        setLoading(false);
    };

    const copy = async (label: string, hash: string) => {
        await navigator.clipboard.writeText(hash);
        setCopied(label);
        setTimeout(() => setCopied(""), 1500);
    };

    return (
        <div className="space-y-4">
            <Textarea
                placeholder="Enter text to hash..."
                value={input}
                onChange={(e) => setInput(e.target.value)}
                className="min-h-[100px] resize-y text-base"
            />
            <Button onClick={generate} disabled={!input || loading}>
                <Hash className="mr-2 h-4 w-4" />
                Generate Hashes
            </Button>
            {results.length > 0 && (
                <div className="space-y-2">
                    {results.map((r) => (
                        <div
                            key={r.label}
                            className="flex items-start justify-between gap-3 rounded-lg border px-3 py-2"
                        >
                            <div className="flex items-start gap-2 min-w-0">
                                <Badge variant="outline" className="shrink-0 mt-0.5 text-xs">
                                    {r.label}
                                </Badge>
                                <code className="text-xs font-mono break-all text-muted-foreground">
                                    {r.hash}
                                </code>
                            </div>
                            <Button
                                variant="ghost"
                                size="icon"
                                className="h-7 w-7 shrink-0"
                                onClick={() => copy(r.label, r.hash)}
                            >
                                {copied === r.label ? (
                                    <Check className="h-3.5 w-3.5" />
                                ) : (
                                    <Copy className="h-3.5 w-3.5" />
                                )}
                            </Button>
                        </div>
                    ))}
                </div>
            )}
        </div>
    );
}