---
// Properties
const {
    Icon,
    Title,
    Description,
    Source,
    Link,
    Status
} = Astro.props

// Icons
import {CheckCircleSolid, XmarkCircleSolid} from '@iconoir/vue'
---

<div class="service">
    <div class="service-icon">
        <img width="92" src={Icon}/>
        { 
            ()=> {
              if (Status === "online") {
                return <p style="color: rgb(121, 235, 121)" class="service-status"><CheckCircleSolid/> Online</p>
              } else  if (Status === "offline") {
                return <p style="color: rgb(248, 77, 77)" class="service-status"><XmarkCircleSolid/> Offline</p>
              }
            }
        }
    </div>
    <div class="service-content">
        <div>
            <h2>{Title}</h2>
            <p>{Description}</p>
            <p class="service-links"><a href={Source}>Source</a> <a href={Link}>View</a></p>
        </div>
    </div>
</div>

<style>
.service {
  position: relative;
  background: transparent;
  border-radius: 10px;
  border: 1px #2b2b2b solid;
  padding: 24px;
  display: flex;
  flex-direction: row;
  align-items: start;
  gap: 24px;
  margin: 6px;
  .service-icon {
    display: flex;
    flex-direction: column;
    img {
        width: 92px;
        border-radius: 12px;
    }
    .service-status {
        display: flex;
        align-items: center;
        gap: 6px;
        justify-content: center;
    }
  }
  .service-content {
    width: 100%;
    h2, p {
        margin: 0px;
    }
    h2 {
        font-size: 18px;
    }
    p {
        font-size: 14px;
    }
    .service-links {
        position: absolute;
        bottom: 24px;
        right: 24px;
        display: flex;
        gap: 12px;
        a {
            text-decoration: underline;
        }
    }
  }
}
</style>