//
// NavBar.swift
// IgniteSamples
// https://www.github.com/twostraws/Ignite
// See LICENSE for license information.
//

import Foundation
import Ignite

/// Displays a global "Social Footer", with each social icon linking to an
/// external site in a new browser tab, demonstrating how to create reusable
/// components with builtIn icons, external links and custom attributes.
struct SocialFooter: HTML {
    let icons = [
        Image(systemName: "gitlab", description: "Gitlab"),
        Image(systemName: "mastodon", description: "Mastodon"),
        Image(systemName: "bluesky", description: "Bluesky")
    ]

    let urlStrings = [
        "https://gitlab.com/roryhinnen",
        "https://twit.social/@roryh",
        "https://bsky.app/profile/rory.hinnen.us"
    ]

    var body: some HTML {
        VStack {
            HStack {
                ForEach(zip(icons, urlStrings)) { (icon, urlString) in
                    Link(icon, target: urlString)
                        .role(.secondary)
                        .target(.blank)
                        .relationship(.noOpener, .noReferrer)
                }
            }
        }
        .font(.title2)
    }
}