import Image from "next/image";
import type { Dictionary } from "@/lib/i18n/get-dictionary";
import {
    CONTACT_EMAIL,
    DISCORD_SERVER_URL,
    GITHUB_URL,
    GITEA_PROFILE_URL,
    SPOTIFY_URL,
    STEAM_URL,
} from "@/lib/site";
import { CopyEmail } from "@/components/copy-email";

import { SectionHeading } from "@/components/section-heading";
export function ContactSection({ dict }: { dict: Dictionary["contact"] }) {
    const entries = [
        { label: dict.github, sub: "@fristyxd", href: GITHUB_URL, icon: "/icons/github.svg" },
        {
            label: dict.discord,
            sub: "discord.gg/fristy",
            href: DISCORD_SERVER_URL,
            icon: "/icons/discord.svg",
        },
        {
            label: dict.gitea,
            sub: "git.fristy.net",
            href: GITEA_PROFILE_URL,
            icon: "/icons/gitea.svg",
        },
        {
            label: dict.spotify,
            sub: "open.spotify.com",
            href: SPOTIFY_URL,
            icon: "/icons/spotify.svg",
        },
        {
            label: dict.steam,
            sub: "fristylikeaillusion",
            href: STEAM_URL,
            icon: "/icons/steam.svg",
        },
    ];

    return (
        <section id="contact" className="scroll-mt-24">
            <SectionHeading kicker={CONTACT_EMAIL} title={dict.title} />
            <div className="grid gap-3 sm:grid-cols-2">
                <div className="flex items-center gap-4 rounded-2xl border border-white/10 bg-panel p-4">
                    <Image src="/icons/gmail.svg" alt="" width={28} height={28} />
                    <div className="min-w-0 flex-1">
                        <p className="text-sm font-semibold">{dict.email}</p>
                        <a
                            href={`mailto:${CONTACT_EMAIL}`}
                            className="block truncate font-mono text-sm text-blurple-soft transition-colors hover:text-white"
                        >
                            {CONTACT_EMAIL}
                        </a>
                    </div>
                    <CopyEmail
                        email={CONTACT_EMAIL}
                        copyLabel={dict.copy}
                        copiedLabel={dict.copied}
                    />
                </div>
                {entries.map((entry) => (
                    <a
                        key={entry.label}
                        href={entry.href}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="group flex items-center gap-4 rounded-2xl border border-white/10 bg-panel p-4 transition-colors hover:border-blurple/60"
                    >
                        <Image src={entry.icon} alt="" width={28} height={28} />
                        <div className="min-w-0 flex-1">
                            <p className="text-sm font-semibold">{entry.label}</p>
                            <p className="truncate font-mono text-sm text-zinc-500 transition-colors group-hover:text-zinc-300">
                                {entry.sub}
                            </p>
                        </div>
                        <span className="text-zinc-600 transition-colors group-hover:text-white">
                            →
                        </span>
                    </a>
                ))}
            </div>
        </section>
    );
}