Color Converter

import { useState } from "react";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Copy, Check } from "lucide-react";

function hexToRgb(hex: string): [number, number, number] | null {
    const m = hex.replace("#", "").match(/^([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i);
    return m ? [parseInt(m[1], 16), parseInt(m[2], 16), parseInt(m[3], 16)] : null;
}

function rgbToHsl(r: number, g: number, b: number): [number, number, number] {
    r /= 255; g /= 255; b /= 255;
    const max = Math.max(r, g, b), min = Math.min(r, g, b);
    let h = 0, s: number;
    const l = (max + min) / 2;
    if (max === min) {
        h = s = 0;
    } else {
        const d = max - min;
        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
        switch (max) {
            case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
            case g: h = ((b - r) / d + 2) / 6; break;
            case b: h = ((r - g) / d + 4) / 6; break;
        }
    }
    return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)];
}

export default function ColorConverter() {
    const [hex, setHex] = useState("#6366f1");
    const [copied, setCopied] = useState("");

    const rgb = hexToRgb(hex);
    const hsl = rgb ? rgbToHsl(...rgb) : null;

    const formats = [
        { label: "HEX", value: hex.toUpperCase() },
        { label: "RGB", value: rgb ? `rgb(${rgb.join(", ")})` : "—" },
        { label: "HSL", value: hsl ? `hsl(${hsl[0]}, ${hsl[1]}%, ${hsl[2]}%)` : "—" },
        { label: "CSS var", value: rgb ? `${rgb.join(" ")}` : "—" },
    ];

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

    return (
        <div className="space-y-4">
            <div className="flex items-center gap-3">
                <div
                    className="w-14 h-14 rounded-lg border shadow-sm shrink-0"
                    style={{ backgroundColor: hex }}
                />
                <Input
                    type="text"
                    value={hex}
                    onChange={(e) => setHex(e.target.value)}
                    placeholder="#6366f1"
                    className="font-mono max-w-[200px]"
                />
                <input
                    type="color"
                    value={hex}
                    onChange={(e) => setHex(e.target.value)}
                    className="w-10 h-10 rounded border cursor-pointer"
                />
            </div>
            <div className="grid gap-2 sm:grid-cols-2">
                {formats.map((f) => (
                    <div
                        key={f.label}
                        className="flex items-center justify-between rounded-lg border px-3 py-2"
                    >
                        <div className="flex items-center gap-2">
                            <Badge variant="outline" className="text-xs">
                                {f.label}
                            </Badge>
                            <code className="text-sm font-mono">{f.value}</code>
                        </div>
                        <Button
                            variant="ghost"
                            size="icon"
                            className="h-7 w-7"
                            onClick={() => copy(f.label, f.value)}
                        >
                            {copied === f.label ? (
                                <Check className="h-3.5 w-3.5" />
                            ) : (
                                <Copy className="h-3.5 w-3.5" />
                            )}
                        </Button>
                    </div>
                ))}
            </div>
        </div>
    );
}