Case Converter

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

export default function CaseConverter() {
    const [text, setText] = useState("");
    const [copied, setCopied] = useState(false);

    const conversions = [
        { label: "UPPERCASE", fn: (t: string) => t.toUpperCase() },
        { label: "lowercase", fn: (t: string) => t.toLowerCase() },
        {
            label: "Title Case",
            fn: (t: string) =>
                t.replace(/\w\S*/g, (w) => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase()),
        },
        {
            label: "Sentence case",
            fn: (t: string) =>
                t.toLowerCase().replace(/(^\s*\w|[.!?]\s+\w)/g, (c) => c.toUpperCase()),
        },
        {
            label: "camelCase",
            fn: (t: string) =>
                t
                    .toLowerCase()
                    .replace(/[^a-zA-Z0-9]+(.)/g, (_, c) => c.toUpperCase()),
        },
        {
            label: "snake_case",
            fn: (t: string) =>
                t
                    .toLowerCase()
                    .replace(/[^a-zA-Z0-9]+/g, "_")
                    .replace(/^_|_$/g, ""),
        },
        {
            label: "kebab-case",
            fn: (t: string) =>
                t
                    .toLowerCase()
                    .replace(/[^a-zA-Z0-9]+/g, "-")
                    .replace(/^-|-$/g, ""),
        },
        {
            label: "aLtErNaTiNg",
            fn: (t: string) =>
                t
                    .split("")
                    .map((c, i) => (i % 2 === 0 ? c.toLowerCase() : c.toUpperCase()))
                    .join(""),
        },
    ];

    const [selected, setSelected] = useState(0);
    const result = text ? conversions[selected].fn(text) : "";

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

    return (
        <div className="space-y-4">
            <Textarea
                placeholder="Enter your text here..."
                value={text}
                onChange={(e) => setText(e.target.value)}
                className="min-h-[120px] resize-y text-base"
            />
            <div className="flex flex-wrap gap-2">
                {conversions.map((c, i) => (
                    <Button
                        key={c.label}
                        variant={selected === i ? "default" : "outline"}
                        size="sm"
                        onClick={() => setSelected(i)}
                    >
                        {c.label}
                    </Button>
                ))}
            </div>
            {result && (
                <div className="relative rounded-lg border bg-muted/50 p-4">
                    <pre className="whitespace-pre-wrap break-words text-sm font-mono">
                        {result}
                    </pre>
                    <Button
                        variant="ghost"
                        size="icon"
                        className="absolute top-2 right-2"
                        onClick={copyResult}
                    >
                        {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
                    </Button>
                </div>
            )}
        </div>
    );
}