import { BookOpen, ExternalLink, FileText, LogIn } from "lucide-react";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import React from "react";

export const URL_META: Record<string, { icon: React.ElementType; label: string }> = {
    login:  { icon: LogIn,    label: 'Acessar painel de login' },
    api:    { icon: BookOpen, label: 'Documentação da API' },
    manual: { icon: FileText, label: 'Manual' },
};

export function ConnectionUrlIcons({ urls }: { urls?: Record<string, string> | null }) {
    if (!urls || typeof urls !== 'object') return null;

    const entries = Object.entries(urls).filter(([, url]) => !!url);
    if (entries.length === 0) return null;

    return (
        <>
            {entries.map(([key, url]) => {
                const meta = URL_META[key] ?? { icon: ExternalLink, label: key };
                const Icon = meta.icon;
                return (
                    <Tooltip key={key}>
                        <TooltipTrigger asChild>
                            <a
                                href={url}
                                target="_blank"
                                rel="noopener noreferrer"
                                className="bg-blue-50 dark:bg-blue-950 rounded-lg p-1.5 flex items-center hover:bg-blue-100 dark:hover:bg-blue-900 transition-colors cursor-pointer"
                            >
                                <Icon size={15} className="text-blue-600 dark:text-blue-400" strokeWidth={2.2} />
                            </a>
                        </TooltipTrigger>
                        <TooltipContent>{meta.label}</TooltipContent>
                    </Tooltip>
                );
            })}
        </>
    );
}