---
import { Icon } from 'astro-icon/components';

interface Props {
  title: string;
  url: string;
  className?: string;
}

const { title, url, className = '' } = Astro.props;

const encodedTitle = encodeURIComponent(title);
const encodedUrl = encodeURIComponent(url);
---

<div class={`post-social-share ${className}`}>
  <span class="share-label">Поделиться:</span>
  <div class="social-icons">
    <!-- Telegram -->
    <a
      href={`https://t.me/share/url?url=${encodedUrl}&text=${encodedTitle}`}
      target="_blank"
      rel="noopener noreferrer"
      class="social-icon telegram"
      aria-label="Поделиться в Telegram"
    >
      <span class="icon-wrapper"><Icon name="telegram" /></span>
    </a>

    <!-- VK -->
    <a
      href={`https://vk.com/share.php?url=${encodedUrl}&title=${encodedTitle}`}
      target="_blank"
      rel="noopener noreferrer"
      class="social-icon vk"
      aria-label="Поделиться в VK"
    >
      <span class="icon-wrapper"><Icon name="vk" /></span>
    </a>

    <!-- WhatsApp -->
    <a
      href={`https://api.whatsapp.com/send?text=${encodedTitle}%20${encodedUrl}`}
      target="_blank"
      rel="noopener noreferrer"
      class="social-icon whatsapp"
      aria-label="Поделиться в WhatsApp"
    >
      <span class="icon-wrapper"><Icon name="whatsapp" /></span>
    </a>

    <!-- Одноклассники -->
    <a
      href={`https://connect.ok.ru/offer?url=${encodedUrl}&title=${encodedTitle}`}
      target="_blank"
      rel="noopener noreferrer"
      class="social-icon odnoklassniki"
      aria-label="Поделиться в Одноклассниках"
    >
      <span class="icon-wrapper"><Icon name="ok" /></span>
    </a>
  </div>
</div>

<style>
  .post-social-share {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .share-label {
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 600;
  }

  .social-icons {
    display: flex;
    gap: 0.5rem;
  }

  .social-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .social-icon :global(svg) {
    width: 1.125rem;
    height: 1.125rem;
  }

  .social-icon.telegram { background: #0088cc; }
  .social-icon.vk { background: #0077FF; }
  .social-icon.whatsapp { background: #25D366; }
  .social-icon.odnoklassniki { background: #EE8208; }

  .social-icon:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }

  @media (max-width: 768px) {
    .post-social-share {
      flex-wrap: wrap;
    }
  }
</style>
