import React from "react";
import { motion } from "framer-motion";
import { Button } from "@/components/ui/button";
import { Share2 } from "lucide-react";

export default function SocialButtons() {
  const handleShare = async () => {
    const shareData = {
      title: "FancyText - Teile die App! 🔥",
      text: "Check out FancyText – coole Fonts für Instagram, TikTok & Co.!",
      url: window.location.href,
    };
    if (navigator.share) {
      try {
        await navigator.share(shareData);
      } catch (err) {
        if (err.name !== "AbortError") console.error("Share failed:", err);
      }
    } else {
      try {
        await navigator.clipboard.writeText(`${shareData.text}\n${shareData.url}`);
        alert("Link kopiert! 📋");
      } catch (err) {
        console.error("Copy failed:", err);
      }
    }
  };

  return (
    <motion.section
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ delay: 0.5 }}
      className="mb-8 sm:mb-12 text-center"
    >
      <Button
        onClick={handleShare}
        className="inline-flex items-center bg-gradient-to-br from-blue-500 to-indigo-500 text-white px-6 py-3 rounded-xl shadow-lg hover:opacity-90 transition"
      >
        <Share2 className="w-5 h-5 mr-2" /> Share
      </Button>
    </motion.section>
  );
}