<template>
  <div class="notification-card" :class="{ 'not-read': !read }">
    <div class="notification-card__icon">
      <Component :is="resolveComponent(`ui-icon-${icon}`)" />
    </div>

    <div class="notification-card__content">
      <p class="notification-card__title">
        {{ title }}
      </p>

      <div class="notification-card__subtitle-wrapper">
        <span class="notification-card__subtitle">
          {{ subtitle }}
        </span>

        <span class="notification-card__date">
          Сегодня в 14:40
        </span>
      </div>

      <slot />
    </div>
  </div>
</template>

<script setup lang="ts">
import type { UiIcon } from '#build/types/ui/icons'

export interface Props {
  icon: UiIcon
  title: string
  subtitle: string
  read: boolean
}

defineProps<Props>()
</script>

<style lang="scss">
.notification-card {
  position: relative;
  display: grid;
  grid-template-columns: 32px auto;
  gap: 8px;
  padding: 8px;
  border-radius: 12px;
  cursor: pointer;
  outline: 1px solid transparent;
  outline-offset: -1px;
  transition: .2s ease-out;
  transition-property: background-color, outline-color;

  &:hover {
    background-color: #F7F9FF;
  }

  &:active {
    outline-color: $clr-cyan-300;
  }

  &.not-read {
    &::after {
      content: '';
      position: absolute;
      top: 12px;
      right: 8px;
      width: 6px;
      height: 6px;
      background-color: $clr-red-500;
      border-radius: 50%;
    }
  }

  &__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    color: var(--notification-card-icon-color, $clr-grey-500);
    background-color: var(--notification-card-icon-background, $clr-grey-200);
  }

  &__content {
  }

  &__title {
    @include txt-r-sb;

    margin-bottom: 4px;
  }

  &__subtitle-wrapper {
    @include txt-t-m;

    display: flex;
    justify-content: space-between;
  }

  &__subtitle {
    color: $clr-grey-600;
  }

  &__date {
    color: $clr-grey-400;
  }
}
</style>
