import { Github, Instagram, MailIcon, Rss } from "lucide-react";
import {
    Tooltip,
    TooltipContent,
    TooltipTrigger,
} from "@/components/ui/tooltip";
import Image from "next/image";

const contact = [
    {
        "name": "Email",
        "url": "mailto:me@imnya.ng",
        "icon": <MailIcon className="w-5 h-5" />,
    },
    {
        "name": "Blog",
        "url": "https://blog.imnya.ng",
        "icon": <Rss className="w-5 h-5" />
    },
    {
        "name": "GitHub",
        "url": "https://github.com/imnyang",
        "icon": <Github className="w-5 h-5" />
    },
    {
        "name": "Instagram",
        "url": "https://instagram.com/imnya.ng",
        "icon": <Instagram className="w-5 h-5" />
    },
    {
        "name": "Discord",
        "url": "https://imnya.ng/discord",
        "icon": <Image src="/icon/discord.svg" alt="Discord" width={20} height={20} className="w-5 h-5 invert-0 dark:invert" />
    },
]

export default function Contact() {
    return (
        <div className="flex flex-row space-x-4">
            {contact.map((method) => (
                <Tooltip key={method.name} >
                    <TooltipTrigger asChild>
                        <a
                            href={method.url}
                            className="flex items-center space-x-2 text-foreground/80 hover:text-foreground transition-colors"
                            target="_blank"
                            rel="noopener noreferrer"
                        >
                            {method.icon}
                        </a>
                    </TooltipTrigger>
                    <TooltipContent>
                        <p>{method.name}</p>
                    </TooltipContent>
                </Tooltip>
            ))}
        </div>
    );
}