'use client';

import React from 'react';
import { Button } from '@/components/ui';

interface ShareButtonProps {
  title: string;
  text: string;
  url: string;
  locale: string;
}

export default function ShareButton({ title, text, url, locale }: ShareButtonProps) {
  const handleShare = async () => {
    if (navigator.share) {
      try {
        await navigator.share({
          title,
          text,
          url,
        });
      } catch (error) {
        console.error('Error sharing:', error);
      }
    } else {
      // Fallback to copy link
      try {
        await navigator.clipboard.writeText(url);
        alert(locale === 'de' ? 'Link kopiert!' : 'Link copied!');
      } catch (error) {
        console.error('Error copying link:', error);
      }
    }
  };

  return (
    <Button 
      onClick={handleShare}
      variant="outline" 
      size="sm" 
      className="flex items-center gap-2 rounded-full px-6"
    >
      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 100 5.368 3 3 0 000-5.368z" />
      </svg>
      {locale === 'de' ? 'Teilen' : 'Share'}
    </Button>
  );
}