<template>
  <div class="copyright">
    <div class="copyright__text">
      <a href="https://mugweb.ir/" target="_blank" rel="noopener">
        <p class="copyright__en">All Rights Reserved. 2026</p>
        <p class="copyright__fa">تمام حقوق مادی و معنوی این وبسایت محفوظ هست.</p>
      </a>
    </div>
    <div class="copyright__social">
      <ul>
        <li v-for="item in social" :key="item.title">
          <a :href="item.link" target="_blank" rel="noopener">
            <SvgIcon :name="item.icon" :size="24" color="var(--color-thd-gray)" />
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

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

const social = [
  {
    title: 'اینستاگرام',
    link: 'https://www.instagram.com/mugweb.ir?igsh=MWprOHF6eWZub3k4bA==',
    icon: 'instagram',
  },
  {
    title: 'تلگرام',
    link: '#',
    icon: 'telegram',
  },
]
</script>

<style lang="scss" scoped>
.copyright {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  align-items: center;
  margin-top: 3rem;

  &__text {
    padding: 0 0.25rem;
    text-align: left;
    direction: ltr;

    a {
      color: inherit;
      text-decoration: none;
    }
  }

  &__en {
    font-family: var(--font-family-en);
    font-size: 0.65rem;
    color: #9ca3af;
    margin: 0;
  }

  &__fa {
    font-family: var(--font-family-fa);
    font-size: 0.75rem;
    margin: 0;
    direction: rtl;
    text-align: right;
  }

  &__social {
    border-right: 1px solid var(--color-thd-gray);
    padding: 0 0.5rem;

    ul {
      list-style: none;
      display: flex;
      gap: 0.5rem;
      margin: 0;
      padding: 0;
    }

    a {
      display: inline-flex;
      transition: opacity 0.15s;

      &:hover {
        opacity: 0.7;
      }
    }
  }
}
</style>
