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

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": "𝕏",
        "url": "https://x.com/imnya_ng",
        "icon": <p className="text-[20px] font-bold">𝕏</p>
    },
    {
        "name": "Discord",
        "url": "https://discord.gg/uxxn2ZZHGn",
        "icon": <Image src="/icon/discord.svg" alt="Discord" width={20} height={20} className="w-5 h-5 invert-0 dark:invert" />
    },
    {
        "name": "maishift",
        "url": "https://mai.sft.sh/imnyang",
        "icon": <Image src="/icon/maimai.webp" alt="mai.sft.sh" 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>
                        <Link
                            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}
                        </Link>
                    </TooltipTrigger>
                    <TooltipContent>
                        <p>{method.name}</p>
                    </TooltipContent>
                </Tooltip>
            ))}
        </div>
    );
}