import Elementary
import Foundation
import Infrastructure
import Localization

/// The site-wide defaults shared by every page of the website.
extension Page {

    // MARK: Computed

    /// The document language, derived from the page's locale and falling back to the default language.
    var lang: String {
        locale.language.languageCode?.identifier
            ?? LanguageList(bundle: .module).default
    }

    /// The icon, manifest, and theme colour metadata shared by every page of the website.
    @HTMLBuilder
    var metadata: some HTML {
        link(
            .rel(.icon),
            .href(StaticFile.favicon.urlPath(
                for: .ico,
                version: assetVersion
            )),
            .custom(
                name: "sizes",
                value: "any"
            )
        )
        link(
            .rel(.icon),
            .href(StaticFile.icon.urlPath(
                for: .svg,
                version: assetVersion
            )),
            .custom(
                name: "type",
                value: "image/svg+xml"
            )
        )
        link(
            .rel("apple-touch-icon"),
            .href(StaticFile.appleTouchIcon.urlPath(
                for: .png,
                version: assetVersion
            ))
        )
        link(
            .rel("manifest"),
            .href(StaticFile.site.urlPath(
                for: .webmanifest,
                version: assetVersion
            ))
        )
        meta(
            .name("theme-color"),
            .content("#fafafa")
        )
        meta(
            .name("theme-color"),
            .content("#0c0710"),
            .custom(
                name: "media",
                value: "(prefers-color-scheme: dark)"
            )
        )
    }

}