---
import { createToolSlug } from '../utils/toolHelpers.js';

export interface Props {
  toolName: string;
  context: 'card' | 'modal-primary' | 'modal-secondary';
  size?: 'small' | 'medium';
}

const { toolName, context, size = 'small' } = Astro.props;

// AFTER: Single line with centralized function
const toolSlug = createToolSlug(toolName);

const iconSize = size === 'small' ? '14' : '16';
---

<button 
  class={`share-btn share-btn--${size}`}
  data-tool-name={toolName}
  data-tool-slug={toolSlug}
  data-context={context}
  onclick="event.stopPropagation(); window.showShareDialog(this)"
  title={`${toolName} teilen`}
  aria-label={`${toolName} teilen`}
>
  <svg width={iconSize} height={iconSize} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <circle cx="18" cy="5" r="3"/>
    <circle cx="6" cy="12" r="3"/>
    <circle cx="18" cy="19" r="3"/>
    <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/>
    <line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/>
  </svg>
</button>

<style>
  .share-btn {
    background: none;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 0.25rem;
    transition: var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  .share-btn:hover {
    color: var(--color-primary);
    background-color: var(--color-bg-secondary);
  }
  
  .share-btn--small {
    padding: 0.125rem;
  }
  
  .share-btn--medium {
    padding: 0.375rem;
  }
  
  .share-btn svg {
    flex-shrink: 0;
  }
</style>