"use client";

import React, { useState, useEffect } from 'react';
import { Facebook, Instagram, Twitter, Link as LinkIcon, Check } from 'lucide-react';
import toast from 'react-hot-toast';

interface Props {
  title: string;
  layout?: 'vertical' | 'horizontal';
}

export default function BlogShareButtons({ title, layout = 'vertical' }: Props) {
  const [copied, setCopied] = useState(false);
  const [url, setUrl] = useState('');

  useEffect(() => {
    setUrl(window.location.href);
  }, []);

  const handleCopy = (customMessage?: string) => {
    if (!url) return;
    navigator.clipboard.writeText(url);
    setCopied(true);
    toast.success(customMessage || 'Lien copié dans le presse-papiers !');
    setTimeout(() => setCopied(false), 2000);
  };

  const shareLinks = {
    facebook: `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`,
    twitter: `https://twitter.com/intent/tweet?url=${encodeURIComponent(url)}&text=${encodeURIComponent(title)}`,
  };

  if (!url) return null;

  return (
    <div className={`flex ${layout === 'horizontal' ? 'flex-row gap-4 justify-center flex-wrap' : 'flex-col gap-3'} z-50`}>
      <a 
        href={shareLinks.facebook}
        target="_blank"
        rel="noopener noreferrer"
        className="w-10 h-10 rounded-full bg-white text-[#1877F2] shadow-xl flex items-center justify-center hover:scale-110 transition-transform border border-gray-100"
        title="Partager sur Facebook"
      >
        <Facebook className="w-5 h-5" />
      </a>
      
      <a 
        href={shareLinks.twitter}
        target="_blank"
        rel="noopener noreferrer"
        className="w-10 h-10 rounded-full bg-white text-black shadow-xl flex items-center justify-center hover:scale-110 transition-transform border border-gray-100"
        title="Partager sur X (Twitter)"
      >
        <Twitter className="w-5 h-5" />
      </a>
      
      <button 
        onClick={() => handleCopy('Lien copié ! Vous pouvez le coller sur Instagram.')}
        className="w-10 h-10 rounded-full bg-gradient-to-tr from-[#f9ce34] via-[#ee2a7b] to-[#6228d7] text-white shadow-xl flex items-center justify-center hover:scale-110 transition-transform"
        title="Copier le lien pour Instagram"
      >
        <Instagram className="w-5 h-5" />
      </button>

      <button 
        onClick={() => handleCopy()}
        className="w-10 h-10 rounded-full bg-gray-800 text-white shadow-xl flex items-center justify-center hover:scale-110 transition-transform"
        title="Copier le lien"
      >
        {copied ? <Check className="w-5 h-5 text-green-400" /> : <LinkIcon className="w-5 h-5" />}
      </button>
    </div>
  );
}