<template>
  <NotificationCardBase icon="s-exit" v-bind="props">
    <p class="location">
      Местоположение: Moscow, Russia
    </p>

    <p class="alert">
      Если это были не вы срочно
      <UiButton type="link" size="small">
        смените пароль
      </UiButton>
      или
      <UiButton type="link" size="small">
        свяжитесь с поддержкой
      </UiButton>
    </p>
  </NotificationCardBase>
</template>

<script setup lang="ts">
import type { Props } from './base.vue'

const props = defineProps<Omit<Props, 'icon'>>()
</script>

<style lang="scss" scoped>
.location {
  @include txt-s-m;

  color: $clr-grey-400;
  margin-top: 4px;
  margin-bottom: 8px;
}

.alert {
  @include txt-r-m;

  padding: 8px;
  border-radius: 6px;
  background-color: $clr-grey-200;
  color: $clr-grey-500;
}
</style>
