<template>
  <Card class="procedure-card-container" :border="true" @click="handleClick">
    <div class="infos">
      <div class="main">
        <Title tag="h5">
          {{ title }}
        </Title>

        <date-ui v-if="updatedAt" :date="updatedAt" />
      </div>

      <Icon icon="arrow-link" />
    </div>
  </Card>
</template>

<script>
import { triggerProcedureLink } from '../helpers'

import { Title, BaseText, Icon } from 'inside-collection/atoms'
import { Card } from 'inside-collection/components'

export default {
  name: 'ProcedureCard',
  components: {
    Card,
    Title,
    BaseText,
    Icon
  },
  props: {
    uuid: {
      type: String
    },
    title: {
      type: String
    },
    updatedAt: {
      type: Number
    },
    contentType: {
      type: String
    },
    slug: {
      type: Array
    }
  },
  methods: {
    handleClick() {
      triggerProcedureLink(this, {
        slug: this.slug[0],
        contentType: this.contentType
      })
    }
  }
}
</script>

<style lang="scss">
.procedure-card-container {
  .infos {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .main {
    display: grid;
    gap: var(--spacing-s);
  }

  .date-ui-container {
    color: var(--color-text-light);
    font-size: var(--font-size-labor);
  }
}

.inside-radius {
  .procedure-card-container {
    border-radius: var(--radius-s);
  }
}
</style>
