<script setup lang="ts">
defineProps<{
  species: any
}>()
</script>
<template>
  <div class="garden-species-card">
    <div class="garden-species-card-content">
      <h3 v-text="species['Common Name']"></h3>
      <a
        :href="species['Reference']"
        v-text="species['Scientific Name']"
        class="link-out"
        style="font-style: italic"
      ></a>
      <p>
        In the
        <span
          v-text="species['Family']"
          style="font-style: italic; color: var(--code-color)"
        ></span>
        family.
      </p>
      <p>
        Flordia native:
        <span v-if="species['Florida Native'] === 'Yes'" style="color: var(--success-color)">
          Yes
        </span>
        <span v-if="species['Florida Native'] !== 'Yes'" style="color: var(--error-color)">No</span>
      </p>
    </div>
    <div class="garden-species-card-image">
      <img v-if="species['Image Link']" :src="species['Image Link']" />
    </div>
  </div>
</template>
<style>
.garden-species-card {
  background-color: var(--background-color-2);
  border-radius: 20px;
  padding: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.garden-species-card > .garden-species-card-content > h3 {
  margin-top: 0;
  margin-bottom: 0.25rem;
  font-family: OpenSans, sans-serif;
}
.garden-species-card > .garden-species-card-content > p {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.garden-species-card-content {
  width: 50%;
  display: inline-block;
  vertical-align: top;
}
.garden-species-card-image {
  width: 50%;
  display: inline-block;
  vertical-align: top;
  text-align: right;
}
.garden-species-card-image > img {
  max-height: 128px;
  max-width: 100%;
}
</style>
