<template>
  <div class="card">
    <div class="card-image">
      <img
        v-if="coop.logo"
        class="image"
          :src="coop.logo"
          :alt="coop.company_name"
        />
        <img
          v-else
          class="image"
          src="@/assets/img/consumo-default.png"
          :alt="coop.company_name"
        />
    </div>
    <div class="card-body" align="left">
      <h2>{{ coop.company_name }}</h2>
      <p class="description">{{ coop.description }}</p>
      <div class="tags">
        <p
          v-for="n in coop.tags"
          :key="n"
          :to="tagRoute(n)"
          class="tags"
        >
          <span>{{ n }}</span>
        </p>
      </div>
    </div>
    <div class="card-actions">
      <NuxtLink :to="`/productoras/${this.coop.id}`" class="btn-outline">
        <button >VER FICHA</button>
      </NuxtLink>
      <NuxtLink v-if="coop.web_link" :to="coop.web_link" class="btn-outline">
        <button>WEB</button>
      </NuxtLink>
    </div>
  </div>
</template>

<script>
import socialShare from '~/utils/socialShare'
export default {
  props: {
    coop: {
      type: Object,
      required: true,
    },
  },
  computed: {
    coopUrl() {
      return `${window.location.origin}/productoras/${this.coop.id}`
    },
  },
  methods: {
    tagRoute(tag) {
      return `/busqueda?tags=${tag}`
    },

    shareFacebook() {
      const url = socialShare.facebook(this.coopUrl)
      window.open(url, '_blank')
    },
    shareTwitter() {
      const url = socialShare.twitter(this.coopUrl)
      window.open(url, '_blank')
    },
    shareWhatsApp() {
      return socialShare.whatsApp(this.coopUrl)
    },
  },
}
</script>

<style lang="scss" scoped>

.card {
    display: flex;
    flex-direction: column;
    border-radius: 1rem;
    border: 2px solid white;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15);
    height: 100%;
    max-height: 546px;
    max-width: 288px;

    .card-image {
      width: 100%;
      height: 288px;
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        max-width: 100%;
        max-height: 100%;
        object-fit: cover;
      }
    }

    .card-body {
      padding: 1rem;
      display: flex;
      flex-direction: column;

      h2 {
        font-size: $m;
        font-weight: $medium;
      }

      p {
        font-size: $s;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;

        span {
          font-size: 0.75rem;
          padding: 0.25rem 0.5rem;
          border-radius: 1rem;
          border: 1px solid #787878;
          color: #787878;
          text-transform: uppercase;
          
        }
      }
    }
    .card-actions {
        display: flex;
        gap: 0.5rem;
        padding: 1rem;

        .btn-outline {
          flex: 1;
          text-align: center;
          padding: 0.5rem;
          font-size: $s;
          color: $color-button;
          border: 1px solid $color-button;
          border-radius: 0.75rem;
          cursor: pointer;
          transition: all 0.2s ease;

          &:hover {
            background: $color-button;
            color: white;
          }
        }
      }
  }
</style>
