ShareButton.js

import { useState } from 'react';
import ShareOutlinedIcon from '@mui/icons-material/ShareOutlined';
import ShareModal from './ShareModal';
import { usePathname } from 'next/navigation';

/**
 * Botão de Compartilhamento que abre o modal e compartilha o link corretamente
 * @param {Object} props
 * @param {String} props.type Tipo do item a ser compartilhado (ex: "colecao", "recurso", "perfil")
 * @param {Number} props.id ID do item a ser compartilhado
 */
export default function ShareButton({ type, id }) {
    const [shareOpen, setShareOpen] = useState(false);
    
    const baseUrl = typeof window !== 'undefined' ? window.location.origin : '';
    const link = `${baseUrl}/${type}/${id}`; // Gera o link dinâmico baseado no tipo e ID
    
    return (
        <>
            <button
                className="p-2 text-sm rounded-[10px] max-md:w-44 w-48 h-11  hover:bg-darkGray-HC-white hover:text-darkGray-HC-dark outline outline-1 outline-lightGray-HC-white text-darkGray-HC-white-underline hover:text-white-HC-dark-underline font-bold normal-case flex justify-center items-center gap-2"
                onClick={() => setShareOpen(true)}
                aria-label="Compartilhar"
            >
                <ShareOutlinedIcon fontSize="small" />
                <span className="hidden md:inline">Compartilhar</span>
            </button>
            <ShareModal
                open={shareOpen}
                onClose={() => setShareOpen(false)}
                title={`Compartilhando ${type}`}
                link={link}
            />
        </>
    );
}