---
const {Page, Service} = Astro.props

const StatusResponse = await fetch("https://" + Page + "/json",).then((response) => response.json());

if (Service) {
    var IsStatus = StatusResponse.services[Service].status
} else {
    var IsStatus = StatusResponse.status
}

var OnlineColor = "#0e9f6e"
var MinorColor = "#c27803"
var MajorColor = "#f05252"

if (IsStatus === "major_outage") {
    var Status = "Major Outage"
    var StatusColor = MajorColor
} else if (IsStatus === "minor_outage") {
    var Status = "Minor Outage"
    var StatusColor = MinorColor
} else if (IsStatus === "operational") {
    var Status = "Operational"
    var StatusColor = OnlineColor
} else if (IsStatus === "online") {
    var Status = "Online"
    var StatusColor = OnlineColor
} else if (IsStatus === "offline") {
    var Status = "Offline"
    var StatusColor = MajorColor
}
---

<a href={'https://' + Page} target="_blank" class="nw-status"><span/> {Status}</a>

<style define:vars={{StatusColor}}>
.nw-status {
    background: #1e1e1e;
    height: min-content;
    border-radius: 6px;
    color: white;
    padding: 2px 10px;
    text-decoration: none;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    gap: 6px;
    align-items: center;
    margin: 0px;
    text-transform: capitalize;
    max-width: max-content;
    span {
        background: var(--StatusColor);
        aspect-ratio: 1;
        width: 12px;
        height: 12px;
        display: block;
        border-radius: 1rem;
    }
}
</style>