<template>
  <div class="entry-card">
    <div class="entry-card__info">
      <p class="entry-card__title">{{ title }}</p>
      <p class="entry-card__subtitle">{{ subtitle }}</p>
    </div>
    <CircleButton tooltip="ویرایش" bg-color="rgba(0, 112, 116, 0.06)" @click="emit('edit')">
      <template #icon>
        <SvgIcon name="pencil" :size="16" color="#007074" />
      </template>
    </CircleButton>
  </div>
</template>

<script setup>
import SvgIcon from '@/components/icons/SvgIcon.vue'
import CircleButton from '@/components/CircleButton.vue'

defineProps({
  title: { type: String, default: '' },
  subtitle: { type: String, default: '' },
})

const emit = defineEmits(['edit'])
</script>

<style lang="scss" scoped>
.entry-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  background: #fff;
  border-radius: 0.875rem;
  box-shadow: 0 6.75px 19.425px rgba(0, 0, 0, 4%);

  &__info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
  }

  &__title {
    font-family: var(--font-family-fa);
    font-weight: 500;
    font-size: 0.875rem;
    color: #4b4b4b;
    margin: 0;
  }

  &__subtitle {
    font-family: var(--font-family-fa);
    font-weight: 300;
    font-size: 0.7rem;
    color: #9a9a9a;
    margin: 0;
  }
}
</style>
