import './style.css';

const Tag = ({ tag }) => {
    console.log(tag)
    return (
        <div class="link-tag">
            {tag}
        </div>
    );
}

const LinkItem = ({ linkData }) => {
    const { config, icon } = linkData;
    const fullUrl = `${window.location.origin}${config.link}`;
    console.log(config.tags)
    return (
        <a
            href={config.link}
            class="link-item"
            target="_blank"
            rel="noopener noreferrer"
        >
            <img
                src={icon}
                class="link-icon"
                onError={(e) => {
                // Fallback to a default icon if the image fails to load
                e.target.src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iIzY2NjY2NiI+PHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAgNDg5IDEwIDEwUzE3LjUyIDIgMTIgMnptLTIgMTVsLTUtNSAxLjQxLTEuNDFMMTAuNTcgMTVsMi4yNDktMi4yNDkgMS40MTQgMS40MTQtMy4yNDkgMy4yNDlMMTAgMTd6Ii8+PC9zdmc+';
                }}
            />

            <div class="link-content">
                <div class="link-title">{config.title}</div>
                <div class="link-description">{config.description}</div>
                <div class="link-tags">
                    {config.tags.map(tag => (<p class="link-tag">{tag}</p>))}
                </div>
            </div>
            
            <div class="link-url">
                {config.link}
            </div>
        </a>
    );
};

export default function Links({ links }) {
    return (
        <div class="links-container">
            {links.map(link => (<LinkItem key={link.id} linkData={link} />))}
        </div>
    );
}
