import React, { useState } from 'react';
import { Search, X } from 'lucide-react';
import * as LucideIcons from 'lucide-react';
import { Button } from './button';
import { Input } from './input';
import { Popover, PopoverContent, PopoverTrigger } from './popover';
import { useTranslation } from 'react-i18next';

interface IconPickerProps {
    value?: string;
    onChange?: (iconName: string) => void;
    placeholder?: string;
    className?: string;
}

// Predefined commonly used icons
const predefinedIcons = [
    'Home', 'User', 'Settings', 'Search', 'Bell', 'Mail', 'Phone', 'Calendar', 'Clock', 'Star',
    'Heart', 'Bookmark', 'Share', 'Download', 'Upload', 'Edit', 'Trash', 'Plus', 'Minus', 'Check',
    'X', 'ChevronLeft', 'ChevronRight', 'ChevronUp', 'ChevronDown', 'ArrowLeft', 'ArrowRight',
    'ArrowUp', 'ArrowDown', 'Eye', 'EyeOff', 'Lock', 'Unlock', 'Shield', 'AlertCircle', 'Info',
    'HelpCircle', 'Menu', 'MoreHorizontal', 'MoreVertical', 'Grid', 'List', 'Filter', 'SortAsc', 'SortDesc',
    'RefreshCw', 'Power', 'Wifi', 'Battery', 'Volume', 'Camera', 'Image', 'File', 'Folder',
    'Database', 'Server', 'Cloud', 'Globe', 'Map', 'Navigation', 'Compass', 'Target'
];

// Social platform icons
const socialPlatforms = [
    'Facebook', 'Twitter', 'Instagram', 'Linkedin', 'Youtube', 'Github', 'Figma',
    'svg:discord', 'svg:whatsapp', 'svg:telegram', 'svg:tiktok', 'svg:snapchat', 'svg:pinterest',
    'svg:reddit', 'svg:twitch', 'svg:skype', 'svg:zoom', 'svg:slack', 'svg:teams',
    'svg:wechat', 'svg:line', 'svg:kakao', 'svg:signal', 'svg:threema', 'svg:vk', 'svg:viber',
    'svg:medium', 'svg:dribbble', 'svg:behance', 'svg:vimeo', 'svg:spotify', 'svg:soundcloud',
    'svg:threads', 'svg:rumble', 'svg:dailymotion', 'svg:audiomack', 'svg:deezer', 'svg:pandora',
    'svg:deviantart', 'svg:artstation', 'svg:substack', 'svg:hashnode', 'svg:devto', 'svg:flickr',
    'svg:unsplash', 'svg:500px', 'svg:clubhouse', 'svg:mastodon', 'svg:bereal', 'svg:etsy',
    'svg:amazon', 'svg:shopify', 'svg:weibo', 'svg:ok', 'svg:anchor', 'svg:podbean',
    'svg:buzzsprout', 'svg:udemy', 'svg:coursera', 'svg:skillshare', 'svg:strava', 'svg:myfitnesspal',
    'svg:steam', 'svg:xbox', 'svg:playstation', 'svg:epic', 'svg:qq', 'svg:qzone',
    'svg:douyin', 'svg:xiaohongshu', 'svg:bilibili', 'svg:zhihu', 'svg:mixi', 'svg:niconico',
    'svg:naver', 'svg:cyworld', 'svg:yandex', 'svg:sharechat', 'svg:moj', 'svg:koo',
    'svg:orkut', 'svg:imo', 'svg:mxit', 'svg:2go', 'svg:zalo', 'svg:bbm', 'svg:apple',
    'svg:bumble', 'svg:bandcamp', 'svg:website', 'svg:blog', 'svg:portfolio'
];

export const customSvgs = {
    'fab fa-facebook-f': '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>',
    'fab fa-instagram': '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>',
    'fab fa-twitter': '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>',
    'fab fa-linkedin-in': '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>',
    tiktok: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.1z"/></svg>',
    discord: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/></svg>',
    whatsapp: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0020.465 3.488"/></svg>',
    telegram: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/></svg>',
    snapchat: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.174-.105-.949-.199-2.403.041-3.439.219-.937 1.404-5.958 1.404-5.958s-.359-.719-.359-1.781c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.347-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.402.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.357-.629-2.748-1.378 0 0-.599 2.282-.744 2.840-.282 1.084-1.064 2.456-1.549 3.235C9.584 23.815 10.77 24.001 12.017 24.001c6.624 0 11.99-5.367 11.99-11.988C24.007 5.367 18.641.001.012.001z"/></svg>',
    pinterest: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.174-.105-.949-.199-2.403.041-3.439.219-.937 1.404-5.958 1.404-5.958s-.359-.719-.359-1.781c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.347-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.402.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.357-.629-2.748-1.378 0 0-.599 2.282-.744 2.840-.282 1.084-1.064 2.456-1.549 3.235C9.584 23.815 10.77 24.001 12.017 24.001c6.624 0 11.99-5.367 11.99-11.988C24.007 5.367 18.641.001.012.001z"/></svg>',
    reddit: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0 1-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.01 1.614a3.111 3.111 0 0 1 .042.52c0 2.694-3.13 4.87-7.004 4.87-3.874 0-7.004-2.176-7.004-4.87 0-.183.015-.366.043-.534A1.748 1.748 0 0 1 4.028 12c0-.968.786-1.754 1.754-1.754.463 0 .898.196 1.207.49 1.207-.883 2.878-1.43 4.744-1.487l.885-4.182a.342.342 0 0 1 .14-.197.35.35 0 0 1 .238-.042l2.906.617a1.214 1.214 0 0 1 1.108-.701zM9.25 12C8.561 12 8 12.562 8 13.25c0 .687.561 1.248 1.25 1.248.687 0 1.248-.561 1.248-1.249 0-.688-.561-1.249-1.249-1.249zm5.5 0c-.687 0-1.248.561-1.248 1.25 0 .687.561 1.248 1.249 1.248.688 0 1.249-.561 1.249-1.249 0-.687-.562-1.249-1.25-1.249zm-5.466 3.99a.327.327 0 0 0-.231.094.33.33 0 0 0 0 .463c.842.842 2.484.913 2.961.913.477 0 2.105-.056 2.961-.913a.361.361 0 0 0 .029-.463.33.33 0 0 0-.464 0c-.547.533-1.684.73-2.512.73-.828 0-1.979-.196-2.512-.73a.326.326 0 0 0-.232-.095z"/></svg>',
    twitch: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714Z"/></svg>',
    skype: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12.069 18.874c-4.023 0-5.82-1.979-5.82-3.464 0-.765.561-1.296 1.333-1.296 1.723 0 1.273 2.477 4.487 2.477 1.641 0 2.55-.895 2.55-1.811 0-.551-.269-1.16-1.354-1.429l-3.576-.895c-2.88-.724-3.403-2.286-3.403-3.751 0-3.047 2.861-4.191 5.549-4.191 2.471 0 5.393 1.373 5.393 3.199 0 .784-.688 1.24-1.453 1.24-1.469 0-1.198-2.037-4.164-2.037-1.469 0-2.292.664-2.292 1.617s1.153 1.258 2.157 1.487l2.637.587c2.891.649 3.624 2.346 3.624 3.944 0 2.476-1.902 4.324-5.668 4.324m11.084-4.882-.029-.135c-.044-.295-.103-.59-.184-.879l.056-.02a2.861 2.861 0 0 0 .795-3.947 2.861 2.861 0 0 0-3.947-.795l-.02.056c-.289-.081-.584-.14-.879-.184l-.135-.029A2.861 2.861 0 0 0 15.07.795 2.861 2.861 0 0 0 11.123.795a2.861 2.861 0 0 0-2.74 2.264l-.135.029c-.295.044-.59.103-.879.184l-.02-.056a2.861 2.861 0 0 0-3.947-.795 2.861 2.861 0 0 0-.795 3.947l.056.02c-.081.289-.14.584-.184.879l-.029.135A2.861 2.861 0 0 0 .795 10.93a2.861 2.861 0 0 0 2.264 2.74l.029.135c.044.295.103.59.184.879l-.056.02a2.861 2.861 0 0 0-.795 3.947 2.861 2.861 0 0 0 3.947.795l.02-.056c.289.081.584.14.879.184l.135.029a2.861 2.861 0 0 0 2.74 2.264 2.861 2.861 0 0 0 2.74-2.264l.135-.029c.295-.044.59-.103.879-.184l.02.056a2.861 2.861 0 0 0 3.947.795 2.861 2.861 0 0 0 .795-3.947l-.056-.02c.081-.289.14-.584.184-.879l.029-.135a2.861 2.861 0 0 0-2.264-2.74"/></svg>',
    zoom: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M1.689 12.484c0 5.894 4.78 10.674 10.674 10.674s10.674-4.78 10.674-10.674S18.257 1.81 12.363 1.81 1.689 6.59 1.689 12.484zm17.096-2.539c.314 0 .569.255.569.569v4.54c0 .314-.255.569-.569.569H7.677c-.314 0-.569-.255-.569-.569v-4.54c0-.314.255-.569.569-.569h11.108zm-1.138 1.138H8.815v2.264h8.832v-2.264z"/></svg>',
    slack: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z"/></svg>',
    teams: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M20.625 7.5c-1.036 0-1.875.84-1.875 1.875s.84 1.875 1.875 1.875S22.5 10.41 22.5 9.375 21.66 7.5 20.625 7.5zm-7.5-3.75c-1.036 0-1.875.84-1.875 1.875s.84 1.875 1.875 1.875S15 6.66 15 5.625 14.16 3.75 13.125 3.75zM5.625 7.5c-1.036 0-1.875.84-1.875 1.875s.84 1.875 1.875 1.875S7.5 10.41 7.5 9.375 6.66 7.5 5.625 7.5zm7.5 7.5c-1.036 0-1.875.84-1.875 1.875s.84 1.875 1.875 1.875 1.875-.84 1.875-1.875-.84-1.875-1.875-1.875zm-7.5 0c-1.036 0-1.875.84-1.875 1.875s.84 1.875 1.875 1.875S7.5 17.91 7.5 16.875 6.66 15 5.625 15zm15 0c-1.036 0-1.875.84-1.875 1.875s.84 1.875 1.875 1.875 1.875-.84 1.875-1.875-.84-1.875-1.875-1.875z"/></svg>',
    twitter: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>',
    wechat: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 0 0 .167-.054l1.903-1.114a.864.864 0 0 1 .717-.098 10.16 10.16 0 0 0 2.837.403c.276 0 .543-.027.811-.05-.857-2.578.157-4.972 1.932-6.446 1.703-1.415 4.882-1.900 7.60.5.5-3.30-2.59-6.686-8.372-6.686z"/><path d="M23.759 11.336c0-3.676-3.151-6.734-7.099-6.734-4.062 0-7.099 3.058-7.099 6.734 0 3.588 2.918 6.734 7.099 6.734.276 0 .554-.027.831-.081a.72.72 0 0 1 .554.108l1.735 1.015a.3.3 0 0 0 .157.054c.276 0 .5-.224.5-.5 0-.072-.027-.143-.054-.214l-.357-1.36a.653.653 0 0 1 .196-.602c1.677-1.238 2.537-2.958 2.537-4.954z"/></svg>',
    line: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63h2.386c.346 0 .627.285.627.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.032-.199.032-.2 0-.393-.078-.535-.219l-2.443-2.422v2.013c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 2.453V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771h.025zm-5.24 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63.346 0 .628.285.628.63v4.771h-.001zm-2.466-1.53h-1.893V8.108c0-.345-.282-.63-.63-.63-.345 0-.627.285-.627.63v4.771c0 .344.282.629.63.629h2.52c.344 0 .627-.285.627-.629 0-.345-.283-.63-.627-.63zM24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314"/></svg>',
    kakao: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 3C6.477 3 2 6.477 2 10.5c0 2.442 1.17 4.617 3.099 6.34l-.81 2.973c-.054.198.147.36.327.264L8.5 18.665c1.149.225 2.348.335 3.5.335 5.523 0 10-3.477 10-7.5S17.523 3 12 3z"/></svg>',
    signal: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12.013 2.25c5.384 0 9.75 4.366 9.75 9.75s-4.366 9.75-9.75 9.75-9.75-4.366-9.75-9.75 4.366-9.75 9.75-9.75zm0 1.5c-4.556 0-8.25 3.694-8.25 8.25s3.694 8.25 8.25 8.25 8.25-3.694 8.25-8.25-3.694-8.25-8.25-8.25zm3.712 5.994c.178.178.178.467 0 .645l-3.712 3.712c-.178.178-.467.178-.645 0l-1.856-1.856c-.178-.178-.178-.467 0-.645s.467-.178.645 0l1.533 1.533 3.39-3.39c.178-.178.467-.178.645 0z"/></svg>',
    threema: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.568 8.16c-.169-.185-.459-.185-.628 0l-4.94 5.334-2.432-2.626c-.169-.185-.459-.185-.628 0-.185.169-.185.459 0 .628l2.746 2.96c.169.185.459.185.628 0l5.254-5.668c.185-.169.185-.459 0-.628z"/></svg>',
    vk: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M15.684 0H8.316C1.592 0 0 1.592 0 8.316v7.368C0 22.408 1.592 24 8.316 24h7.368C22.408 24 24 22.408 24 15.684V8.316C24 1.592 22.408 0 15.684 0zm3.692 17.123h-1.744c-.66 0-.864-.525-2.05-1.727-1.033-1.01-1.49-.9-1.744-.9-.356 0-.458.102-.458.593v1.575c0 .424-.135.678-1.253.678-1.846 0-3.896-1.118-5.335-3.202C4.624 10.857 4.03 8.57 4.03 8.096c0-.254.102-.491.593-.491h1.744c.441 0 .61.203.78.677.863 2.49 2.303 4.675 2.896 4.675.22 0 .322-.102.322-.66V9.721c-.068-1.186-.695-1.287-.695-1.71 0-.204.169-.407.44-.407h2.744c.373 0 .508.203.508.643v3.473c0 .372.169.508.271.508.22 0 .407-.136.813-.542 1.254-1.406 2.151-3.574 2.151-3.574.119-.254.322-.491.763-.491h1.744c.525 0 .644.271.525.643-.22 1.017-2.354 4.031-2.354 4.031-.186.305-.254.44 0 .78.186.254.796.779 1.203 1.253.745.847 1.32 1.558 1.473 2.05.17.49-.085.744-.576.744z"/></svg>',
    viber: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M11.398.002C9.473.028 5.331.344 3.014 2.467 1.294 4.177.693 6.698.623 9.82c-.06 3.11-.13 8.95 5.5 10.541v2.42s-.038.97.602.584c.64-.387 2.85-2.44 4.16-3.55 1.31-1.11 3.34.49 3.34.49s2.85.11 4.25-.35c1.4-.46 2.4-1.48 2.75-2.55.35-1.07.41-2.07.41-2.07s.08-6.24-2.63-9.05C16.468.317 13.608.002 11.398.002zm.05 1.6c1.98-.01 4.44.245 6.72 2.406 2.28 2.16 2.04 7.61 2.04 7.61s-.06.9-.35 1.73c-.29.83-1.08 1.58-2.16 1.96s-3.55.27-3.55.27s-1.62-1.28-2.68-.32c-1.06.96-3.35 2.93-4.18 3.64-.83.71-1.22.42-1.22.42v-1.91c-4.83-1.29-4.78-6.57-4.72-9.17.06-2.6.57-4.68 1.99-6.03 1.42-1.35 4.85-1.6 7.13-1.61zm-.1 3.15c-.28.01-.49.37-.42.78.06.4.38.68.78.68.39 0 .7-.28.78-.68.08-.4-.14-.77-.42-.78-.24-.01-.48.23-.72 0zm2.17.2c-.37-.01-.7.3-.69.67.01.37.32.67.69.67s.67-.3.67-.67c0-.37-.3-.67-.67-.67zm-4.26.27c-.37 0-.67.3-.67.67s.3.67.67.67.67-.3.67-.67-.3-.67-.67-.67zm2.09 1.33c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zm2.17.27c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zm-4.26 0c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5z"/></svg>',
    medium: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M2.846 6.887c.03-.295-.083-.586-.303-.784l-2.24-2.7v-.403h6.958l5.378 11.795 4.728-11.795h6.633v.403l-1.916 1.837c-.165.126-.247.333-.213.538v13.498c-.034.204.048.411.213.537l1.871 1.837v.403h-9.412v-.403l1.939-1.882c.19-.19.19-.246.19-.537v-10.91l-5.389 13.688h-.728l-6.275-13.688v9.174c-.052.385.076.774.347 1.052l2.521 3.058v.404h-7.148v-.404l2.521-3.058c.27-.279.39-.67.325-1.052v-10.608z"/></svg>',
    dribbble: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.628 0-12 5.373-12 12s5.372 12 12 12 12-5.373 12-12-5.372-12-12-12zm9.885 11.441c-2.575-.422-4.943-.445-7.103-.073-.244-.563-.497-1.125-.767-1.68 2.31-1 4.165-2.358 5.548-4.082 1.35 1.594 2.197 3.619 2.322 5.835zm-3.842-7.282c-1.205 1.554-2.868 2.783-4.986 3.68-1.016-1.861-2.178-3.676-3.488-5.438.779-.197 1.591-.314 2.431-.314 2.275 0 4.368.779 6.043 2.072zm-10.516-.993c1.331 1.742 2.511 3.538 3.537 5.381-2.43.715-5.331 1.082-8.684 1.105.692-2.835 2.601-5.193 5.147-6.486zm-5.44 8.834l.013-.256c3.849-.005 7.169-.448 9.95-1.322.233.475.456.952.67 1.432-3.38 1.057-6.165 3.222-8.337 6.48-1.432-1.719-2.296-3.927-2.296-6.334zm3.829 7.81c1.969-3.088 4.482-5.098 7.598-6.027.928 2.42 1.609 4.91 2.043 7.46-3.349 1.291-6.953.666-9.641-1.433zm11.586.43c-.438-2.353-1.08-4.653-1.92-6.897 1.876-.265 3.94-.196 6.199.196-.437 2.786-2.028 5.192-4.279 6.701z"/></svg>',
    behance: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M22 7h-7v-2h7v2zm1.726 10c-.442 1.297-2.029 3-5.101 3-3.074 0-5.564-1.729-5.564-5.675 0-3.91 2.325-5.92 5.466-5.92 3.082 0 4.964 1.782 5.375 4.426.078.506.109 1.188.095 2.14h-8.027c.13 3.211 3.483 3.312 4.588 2.029h3.168zm-7.686-4h4.965c-.105-1.547-1.136-2.219-2.477-2.219-1.466 0-2.277.768-2.488 2.219zm-9.574 6.988h-6.466v-14.967h6.953c5.476.081 5.58 5.444 2.72 6.906 3.461 1.26 3.577 8.061-3.207 8.061zm-3.466-8.988h3.584c2.508 0 2.906-3-.312-3h-3.272v3zm3.391 3h-3.391v3.016h3.341c3.055 0 2.868-3.016.05-3.016z"/></svg>',
    vimeo: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M22.396 7.164c-.093 2.026-1.507 4.799-4.245 8.32-2.829 3.66-5.229 5.49-7.2 5.49-1.216 0-2.244-1.119-3.088-3.355l-1.682-6.175c-.622-2.237-1.29-3.355-2.003-3.355-.156 0-.701.328-1.634.98l-.978-1.261c1.027-.902 2.04-1.805 3.037-2.708 1.369-1.182 2.395-1.805 3.077-1.868 1.617-.156 2.611.951 2.99 3.319.404 2.557.685 4.147.841 4.769.467 2.121.981 3.181 1.542 3.181.435 0 1.09-.689 1.962-2.068.871-1.379 1.336-2.429 1.394-3.147.124-1.187-.343-1.782-1.401-1.782-.498 0-1.012.115-1.542.341 1.023-3.35 2.977-4.977 5.862-4.884 2.139.063 3.148 1.45 3.024 4.161z"/></svg>',
    spotify: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z"/></svg>',
    soundcloud: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M19.833 6.25s-.835 0-1.089.024c-1.737.114-3.212.911-4.246 2.175v9.214h10.502v-9.214c-.833-1.236-2.778-2.199-5.167-2.199zm-7.833 3.482c-.517 0-1.016.086-1.483.25v7.681h2.969v-7.681c-.468-.164-.969-.25-1.486-.25zm-3.017.431c-.223 0-.442.022-.651.065v7.435h1.302v-7.435c-.209-.043-.428-.065-.651-.065zm-2.983.288c-.366 0-.724.064-1.059.19v7.022h2.118v-7.022c-.335-.126-.692-.19-1.059-.19zm-3 .816c-.333.358-.667 1.05-.667 1.716v4.579h1.333v-6.295z"/></svg>',
    threads: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12.186 24h-.007c-3.581-.024-6.334-1.205-8.184-3.509C2.35 18.44 1.5 15.586 1.472 12.01v-.017c.03-3.579.879-6.43 2.525-8.482C5.845 1.205 8.6.024 12.18 0h.014c2.746.02 5.043.725 6.826 2.098 1.677 1.29 2.858 3.13 3.509 5.467l-2.04.569c-1.104-3.96-3.898-5.984-8.304-6.015-2.91.022-5.11.956-6.54 2.771-1.37 1.741-2.036 4.205-2.061 7.242v.023c.025 3.037.692 5.5 2.06 7.243 1.43 1.815 3.633 2.75 6.54 2.772 2.996-.023 5.293-1.05 6.828-3.052 1.205-1.574 1.81-3.26 1.803-5.022-.002-.64-.013-1.245-.037-1.813-.376.228-.8.413-1.241.546-.404.122-.814.182-1.216.182-1.105 0-2.165-.355-2.988-1-1.139-.884-1.784-2.172-1.853-3.706-.05-1.1.26-2.202.87-3.097.673-.993 1.747-1.68 3.123-1.98 1.583-.35 3.45.073 4.681 1.554.134.163.257.338.368.524.295.5.509 1.074.629 1.77.115.694.173 1.423.173 2.224v.021c.008 2.568-.797 5.043-2.266 6.974-1.82 2.392-4.566 3.65-8.16 3.674zM15.01 7.537c-.862-.293-1.702-.226-2.372.191-.522.325-.815.87-.787 1.458.042.878.403 1.486.992 1.672.681.213 1.443.104 1.838-.267.34-.32.52-.786.533-1.374.01-.473-.119-.897-.38-1.252-.14-.19-.462-.345-.824-.428z"/></svg>',
    rumble: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M20.8 2.4H3.2C1.44 2.4 0 3.84 0 5.6v12.8c0 1.76 1.44 3.2 3.2 3.2h17.6c1.76 0 3.2-1.44 3.2-3.2V5.6c0-1.76-1.44-3.2-3.2-3.2zM9.6 16.8V7.2l7.2 4.8-7.2 4.8z"/></svg>',
    dailymotion: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M13.551 11.485c-1.02 0-1.734.816-1.734 1.836s.714 1.836 1.734 1.836c1.02 0 1.734-.816 1.734-1.836s-.714-1.836-1.734-1.836zm7.449-11.485h-18c-1.657 0-3 1.343-3 3v18c0 1.657 1.343 3 3 3h18c1.657 0 3-1.343 3-3v-18c0-1.657-1.343-3-3-3zm-4.082 13.321c0 2.754-2.244 4.998-4.998 4.998s-4.998-2.244-4.998-4.998 2.244-4.998 4.998-4.998 4.998 2.244 4.998 4.998zm1.633-8.321v3.264c.612-.612 1.428-.918 2.244-.918 1.836 0 3.264 1.428 3.264 3.264v5.508h-2.448v-5.508c0-.612-.408-1.02-1.02-1.02s-1.02.408-1.02 1.02v5.508h-2.448v-11.118h2.428z"/></svg>',
    audiomack: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.568 17.568L12 24l-5.568-6.432L12 6.432l5.568 11.136z"/></svg>',
    deezer: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M18.81 16.36v1.44h4.32v-1.44h-4.32zm0-2.88v1.44h4.32v-1.44h-4.32zm0-2.88v1.44h4.32V10.6h-4.32zm-6.48 8.64v1.44h4.32v-1.44H12.33zm0-2.88v1.44h4.32v-1.44H12.33zm0-2.88v1.44h4.32v-1.44H12.33zm0-2.88v1.44h4.32V7.72H12.33zm-6.48 11.52v1.44h4.32v-1.44H5.85zm0-2.88v1.44h4.32v-1.44H5.85zm0-2.88v1.44h4.32v-1.44H5.85zm0-2.88v1.44h4.32v-1.44H5.85zm0-2.88v1.44h4.32V4.84H5.85z"/></svg>',
    pandora: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm-1.5 18c-3.314 0-6-2.686-6-6s2.686-6 6-6c1.657 0 3.157.672 4.243 1.757L13.5 9l-1.243-1.243C11.672 7.172 10.828 6.75 9.75 6.75c-1.795 0-3.25 1.455-3.25 3.25s1.455 3.25 3.25 3.25c1.078 0 1.922-.422 2.507-1.007L13.5 11l1.243-1.243C15.828 8.672 17.328 8 19.5 8v2.25c-1.795 0-3.25 1.455-3.25 3.25s1.455 3.25 3.25 3.25V19c-3.314 0-6-2.686-6-6 0-.828.168-1.617.472-2.336C13.328 11.336 12.172 12 10.5 12z"/></svg>',
    deviantart: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M15.571 0h5.714L18 4.286 21.143 8.571H15.43L12 12.857V0h3.571zM8.571 24H2.857L6.143 19.714 3 15.429h5.714L12 11.143V24H8.571z"/></svg>',
    artstation: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M0 17.723l2.027 3.505h.001a2.424 2.424 0 0 0 2.164 1.333h13.457l-2.792-4.838H0zm24 .025c0-.484-.143-.935-.388-1.314L15.728 2.728a2.424 2.424 0 0 0-2.142-1.289H9.419L21.598 22.54l1.92-3.325c.378-.378.482-.857.482-1.467zM2.252 6.862L8.54 18.307h7.122L9.419 2.728H4.394c-.866 0-1.663.433-2.142 1.134z"/></svg>',
    substack: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M22.539 8.242H1.46V5.406h21.08v2.836zM1.46 10.812V24L12 18.11 22.54 24V10.812H1.46zM22.54 0H1.46v2.836h21.08V0z"/></svg>',
    hashnode: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M22.351 8.019l-6.37-6.37a5.63 5.63 0 0 0-7.962 0l-6.37 6.37a5.63 5.63 0 0 0 0 7.962l6.37 6.37a5.63 5.63 0 0 0 7.962 0l6.37-6.37a5.63 5.63 0 0 0 0-7.962zM12 15.953a3.953 3.953 0 1 1 0-7.906 3.953 3.953 0 0 1 0 7.906z"/></svg>',
    devto: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M7.826 10.083a.784.784 0 0 0-.468-.175h-.701v4.198h.701a.786.786 0 0 0 .468-.175c.155-.117.233-.292.233-.525v-2.798c.001-.233-.078-.408-.233-.525zM19.236 3.4H4.764C3.791 3.4 3.4 4.018 3.4 4.764v14.473c0 .746.391 1.364 1.364 1.364h14.473c.746 0 1.364-.618 1.364-1.364V4.764c-.001-.746-.618-1.364-1.365-1.364zm-2.752 7.725a2.73 2.73 0 0 1-2.11 1.958v.001c-.492.089-.983.135-1.476.135-.493 0-.984-.046-1.476-.135a2.73 2.73 0 0 1-2.11-1.958 6.226 6.226 0 0 1-.331-2.04c0-.694.111-1.369.331-2.04a2.73 2.73 0 0 1 2.11-1.958c.492-.089.983-.135 1.476-.135.493 0 .984.046 1.476.135a2.73 2.73 0 0 1 2.11 1.958c.22.671.331 1.346.331 2.04 0 .694-.111 1.369-.331 2.04z"/></svg>',
    flickr: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M0 12c0 2.05.33 4.01.94 5.86C2.55 20.72 5.14 22.64 8.2 23.06c1.5.21 3.05.21 4.55 0 3.06-.42 5.65-2.34 7.26-5.2.61-1.85.94-3.81.94-5.86s-.33-4.01-.94-5.86C18.4 3.28 15.81 1.36 12.75.94c-1.5-.21-3.05-.21-4.55 0C5.14 1.36 2.55 3.28.94 6.14.33 7.99 0 9.95 0 12zm6 0c0-1.66 1.34-3 3-3s3 1.34 3 3-1.34 3-3 3-3-1.34-3-3zm9 0c0-1.66 1.34-3 3-3s3 1.34 3 3-1.34 3-3 3-3-1.34-3-3z"/></svg>',
    unsplash: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M7.5 6.75V0h9v6.75h-9zm9 3.75H24V24H0V10.5h7.5v6.75h9V10.5z"/></svg>',
    "500px": '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M7.439 9.01c-.44 0-.799.36-.799.799 0 .44.359.799.799.799.44 0 .799-.36.799-.799 0-.439-.359-.799-.799-.799zm8.988 0c-.44 0-.799.36-.799.799 0 .44.359.799.799.799.44 0 .799-.36.799-.799 0-.439-.359-.799-.799-.799zM12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm0 22C6.486 22 2 17.514 2 12S6.486 2 12 2s10 4.486 10 10-4.486 10-10 10z"/></svg>',
    clubhouse: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm-1.5 18.5c-.828 0-1.5-.672-1.5-1.5V7c0-.828.672-1.5 1.5-1.5S12 6.172 12 7v10c0 .828-.672 1.5-1.5 1.5zm3 0c-.828 0-1.5-.672-1.5-1.5V9c0-.828.672-1.5 1.5-1.5s1.5.672 1.5 1.5v8c0 .828-.672 1.5-1.5 1.5z"/></svg>',
    mastodon: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"/></svg>',
    bereal: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm-3 8c1.105 0 2 .895 2 2s-.895 2-2 2-2-.895-2-2 .895-2 2-2zm6 0c1.105 0 2 .895 2 2s-.895 2-2 2-2-.895-2-2 .895-2 2-2zm-6 8c-2.209 0-4-1.791-4-4h8c0 2.209-1.791 4-4 4z"/></svg>',
    etsy: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M9.16 11.5h2.89v1.69H9.16v3.26c0 .63.16 1.06.97 1.06.35 0 .7-.11.97-.32l.54 1.52c-.48.32-1.16.54-1.97.54-2.05 0-2.78-1.38-2.78-3.21V7.76H5.75V6.07h1.14V3.68l2.27-.7v3.09h2.89v1.69H9.16v1.74zm5.9-5.43c.76 0 1.38.62 1.38 1.38s-.62 1.38-1.38 1.38-1.38-.62-1.38-1.38.62-1.38 1.38-1.38zm-1.14 11.36V6.07h2.27v11.36h-2.27z"/></svg>',
    amazon: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M.045 18.02c.072-.116.187-.124.348-.022 3.636 2.11 7.594 3.166 11.87 3.166 2.852 0 5.668-.533 8.447-1.595l.315-.14c.138-.06.234-.1.293-.13.226-.088.39-.046.525.13.12.174.09.336-.12.48-.256.19-.6.41-1.006.654-1.244.743-2.64 1.316-4.185 1.726-1.548.41-3.156.615-4.83.615-3.42 0-6.673-.633-9.755-1.902-.244-.1-.45-.21-.615-.33-.165-.12-.24-.21-.24-.33 0-.09.03-.15.09-.21l.062-.062zm1.005-1.32c-.165-.27-.45-.405-.855-.405h-.18c-.165 0-.285-.06-.36-.18-.075-.12-.09-.24-.045-.36.045-.12.12-.18.225-.18h4.38c.165 0 .285.06.36.18.075.12.09.24.045.36-.045.12-.12.18-.225.18h-.18c-.405 0-.69.135-.855.405-.165.27-.225.615-.18 1.035l.405 4.005c.045.42.135.75.27.99.135.24.315.36.54.36h.18c.165 0 .285.06.36.18.075.12.09.24.045.36-.045.12-.12.18-.225.18h-4.38c-.165 0-.285-.06-.36-.18-.075-.12-.09-.24-.045-.36.045-.12.12-.18.225-.18h.18c.225 0 .405-.12.54-.36.135-.24.225-.57.27-.99l.405-4.005c.045-.42-.015-.765-.18-1.035z"/></svg>',
    shopify: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M15.337 2.368c-.332-.074-.996-.074-1.328 0-.332.074-.664.148-.996.222-.074-.148-.148-.296-.296-.444-.148-.148-.296-.222-.518-.222-.074 0-.148 0-.222.074-.074-.074-.148-.148-.296-.222-.148-.074-.296-.148-.518-.148-.222 0-.444.074-.592.148-.148.074-.296.148-.37.296-.074.148-.074.296-.074.444v.148c-.296.074-.592.148-.888.222-.296.074-.592.148-.888.222v.148c0 .074 0 .148.074.222.074.074.148.074.222.074h.148c.148 0 .296.074.37.148.074.074.148.222.148.37v.148c0 .148-.074.296-.148.37-.074.074-.222.148-.37.148h-.148c-.074 0-.148 0-.222.074-.074.074-.074.148-.074.222v.148c.296.074.592.148.888.222.296.074.592.148.888.222v-.148c0-.148.074-.296.074-.444.074-.148.222-.296.37-.296.148 0 .296.148.37.296.074.148.074.296.074.444v.148c.332-.074.664-.148.996-.222.332-.074.996-.074 1.328 0v-.148c0-.148-.074-.296-.074-.444-.074-.148-.222-.296-.37-.296-.148 0-.296.148-.37.296-.074.148-.074.296-.074.444v.148z"/></svg>',
    weibo: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M9.31 23.31c-5.14-.13-9.30-4.17-9.31-9.29 0-2.18.77-4.32 2.14-5.97C3.5 6.26 5.97 5.23 8.5 5.23c.85 0 1.7.13 2.5.38.18.06.30.22.30.41 0 .24-.20.43-.43.43-.06 0-.12-.01-.18-.03-.69-.22-1.42-.33-2.19-.33-4.14 0-7.5 3.36-7.5 7.5 0 4.14 3.36 7.5 7.5 7.5 4.14 0 7.5-3.36 7.5-7.5 0-.77-.11-1.5-.33-2.19-.02-.06-.03-.12-.03-.18 0-.23.19-.43.43-.43.19 0 .35.12.41.30.25.80.38 1.65.38 2.5-.01 5.12-4.17 9.28-9.29 9.31z"/></svg>',
    ok: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.373 0 0 5.372 0 12s5.373 12 12 12 12-5.372 12-12S18.627 0 12 0zm0 4.622c2.005 0 3.634 1.628 3.634 3.634 0 2.005-1.629 3.634-3.634 3.634s-3.634-1.629-3.634-3.634c0-2.006 1.629-3.634 3.634-3.634zm0 9.65c-.837 0-1.518-.681-1.518-1.518s.681-1.518 1.518-1.518 1.518.681 1.518 1.518-.681 1.518-1.518 1.518zm4.807 2.149l-2.21-2.21c-.293-.293-.768-.293-1.061 0l-2.21 2.21c-.293.293-.293.768 0 1.061l2.21 2.21c.293.293.768.293 1.061 0l2.21-2.21c.293-.293.293-.768 0-1.061z"/></svg>',
    anchor: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm0 19c-3.859 0-7-3.141-7-7s3.141-7 7-7 7 3.141 7 7-3.141 7-7 7zm0-12c-2.757 0-5 2.243-5 5s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5zm0 8c-1.654 0-3-1.346-3-3s1.346-3 3-3 3 1.346 3 3-1.346 3-3 3z"/></svg>',
    apple: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/></svg>',
    website: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.568 17.568L12 24l-5.568-6.432L12 6.432l5.568 11.136z"/></svg>',
    blog: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>',
    portfolio: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M20 6h-2.18c.11-.31.18-.65.18-1a2.996 2.996 0 0 0-5.5-1.65l-.5.67-.5-.68C10.96 2.54 10.05 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-5-2.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5S13.5 5.83 13.5 5s.67-1.5 1.5-1.5zM9 3.5c.83 0 1.5.67 1.5 1.5S9.83 6.5 9 6.5 7.5 5.83 7.5 5 8.17 3.5 9 3.5zM12 12.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5-1.5-.67-1.5-1.5.67-1.5 1.5-1.5z"/></svg>',
    podbean: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm-1 17c-2.761 0-5-2.239-5-5s2.239-5 5-5 5 2.239 5 5-2.239 5-5 5zm2-5c0-1.105-.895-2-2-2s-2 .895-2 2 .895 2 2 2 2-.895 2-2z"/></svg>',
    buzzsprout: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm0 18c-3.314 0-6-2.686-6-6s2.686-6 6-6 6 2.686 6 6-2.686 6-6 6zm0-10c-2.209 0-4 1.791-4 4s1.791 4 4 4 4-1.791 4-4-1.791-4-4-4zm0 6c-1.105 0-2-.895-2-2s.895-2 2-2 2 .895 2 2-.895 2-2 2z"/></svg>',
    udemy: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 0L1.608 6v12L12 24l10.392-6V6L12 0zm-1.073 13.739c-1.425 0-2.579-1.155-2.579-2.579s1.155-2.579 2.579-2.579 2.579 1.155 2.579 2.579-1.155 2.579-2.579 2.579zm8.925-1.073c0 .59-.478 1.073-1.073 1.073s-1.073-.478-1.073-1.073V9.087c0-.59.478-1.073 1.073-1.073s1.073.478 1.073 1.073v3.579z"/></svg>',
    coursera: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M11.374 23.977c-1.016-.045-2.021-.183-3.004-.413-1.846-.431-3.622-1.194-5.059-2.176C2.142 20.465 1.112 19.65.335 18.672c-.777-.978-1.295-2.044-1.548-3.192C-.524 14.297-.434 13.092.335 11.672c.769-1.42 2.013-2.634 3.376-3.542C5.074 7.222 6.59 6.644 8.37 6.231c.89-.206 1.846-.309 2.804-.309.958 0 1.914.103 2.804.309 1.78.413 3.296.991 4.659 1.899 1.363.908 2.607 2.122 3.376 3.542.769 1.42.859 2.625.548 3.808-.253 1.148-.771 2.214-1.548 3.192-.777.978-1.807 1.793-2.976 2.716-1.437.982-3.213 1.745-5.059 2.176-.983.23-1.988.368-3.004.413z"/></svg>',
    skillshare: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm-2 17c-2.761 0-5-2.239-5-5s2.239-5 5-5 5 2.239 5 5-2.239 5-5 5zm4-5c0-2.209-1.791-4-4-4s-4 1.791-4 4 1.791 4 4 4 4-1.791 4-4z"/></svg>',
    strava: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M15.387 17.944l-2.089-4.116h-3.065L15.387 24l5.15-10.172h-3.066m-7.008-5.599l2.836 5.598h4.172L10.463 0l-7 13.828h4.172"/></svg>',
    myfitnesspal: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm0 18c-3.314 0-6-2.686-6-6s2.686-6 6-6 6 2.686 6 6-2.686 6-6 6zm0-10c-2.209 0-4 1.791-4 4s1.791 4 4 4 4-1.791 4-4-1.791-4-4-4z"/></svg>',
    steam: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M11.979 0C5.678 0 .511 4.86.022 11.037l6.432 2.658c.545-.371 1.203-.59 1.912-.59.063 0 .125.004.188.006l2.861-4.142s.016-.023.016-.023c0-2.319 1.875-4.202 4.188-4.202 2.313 0 4.188 1.883 4.188 4.202s-1.875 4.202-4.188 4.202h-.097l-4.144 2.95c0 .06-.003.12-.003.181 0 1.993-1.616 3.609-3.609 3.609-1.685 0-3.099-1.157-3.514-2.717L.022 14.983C.511 21.14 5.678 26 11.979 26c6.624 0 11.979-5.355 11.979-11.979C23.958 5.355 18.603.021 11.979.021zM7.54 18.021c.414.171.862.22 1.311.122.449-.098.83-.301 1.123-.566.293-.265.496-.593.566-1.02s.027-.859-.122-1.273c-.149-.414-.394-.777-.682-1.041-.288-.264-.633-.419-1.013-.459-.38-.04-.759.04-1.093.222-.334.182-.6.448-.769.769-.169.321-.24.684-.2 1.041.04.357.169.684.394.977.225.293.516.516.849.649.333.133.684.169 1.041.129.357-.04.684-.169.977-.394l-1.382-.571zm8.674-8.425c0-1.54-1.251-2.791-2.791-2.791s-2.791 1.251-2.791 2.791 1.251 2.791 2.791 2.791 2.791-1.251 2.791-2.791zm-4.025 0c0-.681.553-1.234 1.234-1.234s1.234.553 1.234 1.234-.553 1.234-1.234 1.234-1.234-.553-1.234-1.234z"/></svg>',
    xbox: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M4.102 21.033C6.211 22.881 8.977 24 12 24s5.789-1.119 7.898-2.967C21.677 18.543 22.5 15.361 22.5 12c0-5.799-4.701-10.5-10.5-10.5S1.5 6.201 1.5 12c0 3.361.823 6.543 2.602 9.033zM12 2.25c5.385 0 9.75 4.365 9.75 9.75 0 2.864-.618 5.584-1.729 8.045C18.798 21.518 17.053 22.5 15 22.5c-1.657 0-3.157-.629-4.286-1.661L12 19.5l1.286 1.339C14.415 21.871 15.915 22.5 17.571 22.5c2.053 0 3.798-.982 5.021-2.455C23.632 17.584 24.25 14.864 24.25 12c0-5.385-4.365-9.75-9.75-9.75S2.75 6.615 2.75 12c0 2.864.618 5.584 1.729 8.045C5.702 21.518 7.447 22.5 9.5 22.5c1.657 0 3.157-.629 4.286-1.661L12 19.5l-1.286 1.339C9.585 21.871 8.085 22.5 6.429 22.5c-2.053 0-3.798-.982-5.021-2.455C.368 17.584-.25 14.864-.25 12c0-5.385 4.365-9.75 9.75-9.75z"/></svg>',
    playstation: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M8.985 2.596v17.548l3.915 1.261V6.688c0-.69.304-1.151.794-.991.636.181.794.814.794 1.505v5.876c2.441 1.193 4.794-.146 4.794-2.992V4.334c0-3.094-2.353-5.125-5.876-3.35L8.985 2.596zm5.997 11.433c-.158.079-.316.079-.475 0V9.688c.158-.079.316-.079.475 0v4.341zm-10.982.158C1.156 13.762 0 15.546 0 17.762c0 2.216 1.156 4 2.6 4s2.6-1.784 2.6-4c0-2.216-1.156-4-2.6-4zm0 6.4c-.794 0-1.44-.646-1.44-1.44s.646-1.44 1.44-1.44 1.44.646 1.44 1.44-.646 1.44-1.44 1.44z"/></svg>',
    epic: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm-2 18c-3.314 0-6-2.686-6-6s2.686-6 6-6 6 2.686 6 6-2.686 6-6 6zm4-6c0-2.209-1.791-4-4-4s-4 1.791-4 4 1.791 4 4 4 4-1.791 4-4z"/></svg>',
    qq: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.568 17.568L12 24l-5.568-6.432L12 6.432l5.568 11.136z"/></svg>',
    qzone: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.174-.105-.949-.199-2.403.041-3.439.219-.937 1.404-5.958 1.404-5.958s-.359-.719-.359-1.781c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.347-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.402.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.357-.629-2.748-1.378 0 0-.599 2.282-.744 2.840-.282 1.084-1.064 2.456-1.549 3.235C9.584 23.815 10.77 24.001 12.017 24.001c6.624 0 11.99-5.367 11.99-11.988C24.007 5.367 18.641.001 12.017.001z"/></svg>',
    douyin: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/></svg>',
    xiaohongshu: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm-4 6h8c1.1 0 2 .9 2 2v8c0 1.1-.9 2-2 2H8c-1.1 0-2-.9-2-2V8c0-1.1.9-2 2-2zm2 3v6h4V9h-4zm-1 2h1v2H9v-2zm6 0h1v2h-1v-2z"/></svg>',
    bilibili: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.813 4.653h.854c1.51.054 2.769.578 3.773 1.574 1.004.995 1.524 2.249 1.56 3.76v7.36c-.036 1.51-.556 2.769-1.56 3.773s-2.262 1.524-3.773 1.56H5.333c-1.51-.036-2.769-.556-3.773-1.56S.036 18.858 0 17.347v-7.36c.036-1.511.556-2.765 1.56-3.76 1.004-.996 2.262-1.52 3.773-1.574h.774l-1.174-1.12a1.234 1.234 0 0 1-.373-.906c0-.356.124-.658.373-.907l.027-.027c.267-.249.573-.373.92-.373.347 0 .653.124.92.373L9.653 4.44c.071.071.134.142.187.213h4.267a.836.836 0 0 1 .16-.213l2.853-2.747c.267-.249.573-.373.92-.373.347 0 .662.151.929.4.267.249.391.551.391.907 0 .356-.124.658-.373.906L17.813 4.653zM5.333 7.24c-.746.018-1.373.276-1.88.773-.506.498-.769 1.13-.789 1.894v7.52c.02.765.283 1.395.789 1.893.507.498 1.134.756 1.88.773h13.334c.746-.017 1.373-.275 1.88-.773.506-.498.769-1.128.789-1.893v-7.52c-.02-.765-.283-1.396-.789-1.894-.507-.497-1.134-.755-1.88-.773H5.333zM8 11.107c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c.017-.391.15-.711.4-.96.249-.249.56-.373.933-.373zm8 0c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c.017-.391.15-.711.4-.96.249-.249.56-.373.933-.373z"/></svg>',
    zhihu: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M13.444 12.208c0 .725-.279 1.348-.835 1.869-.557.521-1.242.782-2.057.782-.814 0-1.5-.261-2.057-.782-.556-.521-.835-1.144-.835-1.869 0-.725.279-1.348.835-1.869.557-.521 1.243-.782 2.057-.782.815 0 1.5.261 2.057.782.556.521.835 1.144.835 1.869zm10.556-.208c0 6.627-5.373 12-12 12s-12-5.373-12-12 5.373-12 12-12 12 5.373 12 12zm-7 0c0-2.761-2.239-5-5-5s-5 2.239-5 5 2.239 5 5 5 5-2.239 5-5z"/></svg>',
    mixi: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M7.8 0C3.492 0 0 3.492 0 7.8v8.4C0 20.508 3.492 24 7.8 24h8.4c4.308 0 7.8-3.492 7.8-7.8V7.8C24 3.492 20.508 0 16.2 0H7.8zm4.2 6c1.657 0 3 1.343 3 3s-1.343 3-3 3-3-1.343-3-3 1.343-3 3-3zm0 8c1.657 0 3 1.343 3 3s-1.343 3-3 3-3-1.343-3-3 1.343-3 3-3z"/></svg>',
    niconico: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M0 0v24h24V0H0zm4 4h4v4H4V4zm8 0h4v4h-4V4zm-8 8h4v4H4v-4zm8 0h4v4h-4v-4zm4-4h4v4h-4V8zM16 4h4v4h-4V4z"/></svg>',
    naver: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M16.273 12.845L7.376 0H0v24h7.727V11.155L16.624 24H24V0h-7.727v12.845z"/></svg>',
    cyworld: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm-3 8c1.105 0 2 .895 2 2s-.895 2-2 2-2-.895-2-2 .895-2 2-2zm6 0c1.105 0 2 .895 2 2s-.895 2-2 2-2-.895-2-2 .895-2 2-2zm-3 10c-2.209 0-4-1.791-4-4h8c0 2.209-1.791 4-4 4z"/></svg>',
    yandex: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm-1 18h-2V6h3c2.761 0 5 2.239 5 5 0 1.864-1.022 3.486-2.536 4.358L18 18h-2.5l-2.5-3H11v3z"/></svg>',
    sharechat: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm-1.5 6h3c1.657 0 3 1.343 3 3v6c0 1.657-1.343 3-3 3h-3c-1.657 0-3-1.343-3-3V9c0-1.657 1.343-3 3-3zm1.5 3c-.828 0-1.5.672-1.5 1.5s.672 1.5 1.5 1.5 1.5-.672 1.5-1.5S12.828 9 12 9zm0 4.5c-.828 0-1.5.672-1.5 1.5s.672 1.5 1.5 1.5 1.5-.672 1.5-1.5-.672-1.5-1.5-1.5z"/></svg>',
    moj: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>',
    koo: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm3.5 6L12 10.5 8.5 8 12 5.5 15.5 8zM8.5 16L12 13.5 15.5 16 12 18.5 8.5 16z"/></svg>',
    orkut: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm0 4.5c2.071 0 3.75 1.679 3.75 3.75S14.071 12 12 12s-3.75-1.679-3.75-3.75S9.929 4.5 12 4.5zm0 15c-2.485 0-4.5-2.015-4.5-4.5h9c0 2.485-2.015 4.5-4.5 4.5z"/></svg>',
    imo: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.94-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>',
    mxit: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/></svg>',
    "2go": '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>',
    zalo: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c1.19 0 2.34-.21 3.41-.6L19 23l1.6-3.59C21.79 17.34 22 15.19 22 12c0-5.52-4.48-10-10-10zm0 2c4.41 0 8 3.59 8 8 0 2.21-.9 4.21-2.35 5.65L15 20l-2.65-2.35C10.9 16.21 10 14.21 10 12c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2z"/></svg>',
    bbm: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15H9v-2h2v2zm0-4H9V9h2v4zm2 4h-2v-2h2v2zm0-4h-2V9h2v4zm2 4h-2v-2h2v2zm0-4h-2V9h2v4z"/></svg>',
    bumble: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14c-2.67 0-8-1.34-8-4v-2c0-2.66 5.33-4 8-4s8 1.34 8 4v2c0 2.66-5.33 4-8 4z"/></svg>',
    bandcamp: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M0 8.05l5.6 7.9h4.8L4.8 8.05H0zm8.4 0l5.6 7.9H24l-5.6-7.9H8.4z"/></svg>'
};

// Get all available Lucide icons
const allLucideIcons = Object.keys(LucideIcons).filter(name => {
    const component = LucideIcons[name as keyof typeof LucideIcons];

    return (
        component &&
        typeof component === 'object' && // forwardRef gives an object
        (component as any).$$typeof === Symbol.for('react.forward_ref') && // check React marker
        name !== 'createLucideIcon' &&
        name !== 'default' &&
        name !== 'icons' &&
        !name.endsWith('Icon') &&
        !name.startsWith('Lucide') && // Exclude Lucide-prefixed duplicates
        name.charAt(0) === name.charAt(0).toUpperCase()
    );
});



export function IconPicker({ value, onChange, placeholder = 'Select an icon', className = '' }: IconPickerProps) {
    const { t } = useTranslation();
    const [isOpen, setIsOpen] = useState(false);
    const [search, setSearch] = useState('');
    const [activeTab, setActiveTab] = useState<'predefined' | 'social' | 'all'>('predefined');

    const getIconsByTab = () => {
        switch (activeTab) {
            case 'predefined':
                return predefinedIcons;
            case 'social':
                return socialPlatforms;
            case 'all':
                return allLucideIcons;
            default:
                return predefinedIcons;
        }
    };

    const currentIcons = getIconsByTab();

    const filteredIcons = currentIcons.filter(name => {
        const searchLower = search.toLowerCase();
        const nameLower = name.toLowerCase();
        // Also search without 'svg:' prefix for social icons
        const cleanName = name.startsWith('svg:') ? name.replace('svg:', '') : name;
        return nameLower.includes(searchLower) || cleanName.toLowerCase().includes(searchLower);
    });

    // Limit to 100 icons if no search term for performance
    const displayIcons = search ? filteredIcons : filteredIcons.slice(0, 100);

    const handleSelect = (iconName: string) => {
        onChange?.(iconName);
        setIsOpen(false);
        setSearch('');
    };

    const renderIcon = (iconName: string, size: number = 16) => {
        if (iconName.startsWith('svg:')) {
            const svgKey = iconName.replace('svg:', '') as keyof typeof customSvgs;
            const svgContent = customSvgs[svgKey];
            if (svgContent) {
                return <div dangerouslySetInnerHTML={{ __html: svgContent }} style={{width: size, height: size}} />;
            }
            return <div style={{width: size, height: size}} className="bg-gray-200 rounded flex items-center justify-center text-xs">?</div>;
        }
        
        const IconComponent = LucideIcons[iconName as keyof typeof LucideIcons] as React.ComponentType<{size?: number}>;
        if (IconComponent) {
            return <IconComponent size={size} />;
        }
        
        return <div style={{width: size, height: size}} className="bg-gray-200 rounded" />;
    };

    return (
        <div className={className}>
            <Popover open={isOpen} onOpenChange={setIsOpen}>
                <PopoverTrigger asChild>
                    <Button
                        type="button"
                        variant="outline"
                        className="w-full justify-between text-left font-normal"
                    >
                        <div className="flex items-center space-x-2">
                            {value && renderIcon(value, 16)}
                            <span className={value ? '' : 'text-muted-foreground'}>
                                {value || placeholder}
                            </span>
                        </div>
                        <Search size={16} className="text-muted-foreground" />
                    </Button>
                </PopoverTrigger>
                <PopoverContent className="w-80 p-0" align="start">
                    <div className="p-3 border-b">
                        <div className="flex space-x-1 mb-3">
                            <Button
                                type="button"
                                size="sm"
                                variant={activeTab === 'predefined' ? 'default' : 'outline'}
                                onClick={() => setActiveTab('predefined')}
                                className="text-xs"
                            >
                                {t("Common")}
                            </Button>
                            <Button
                                type="button"
                                size="sm"
                                variant={activeTab === 'social' ? 'default' : 'outline'}
                                onClick={() => setActiveTab('social')}
                                className="text-xs"
                            >
                                {t("Social")}
                            </Button>
                            <Button
                                type="button"
                                size="sm"
                                variant={activeTab === 'all' ? 'default' : 'outline'}
                                onClick={() => setActiveTab('all')}
                                className="text-xs"
                            >
                                {t("All Icons")}
                            </Button>
                        </div>
                        <div className="relative">
                            <Search size={16} className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground" />
                            <Input
                                type="text"
                                value={search}
                                onChange={(e) => setSearch(e.target.value)}
                                placeholder="Search icons..."
                                className="pl-9 pr-8"
                            />
                            {search && (
                                <Button
                                    type="button"
                                    size="sm"
                                    variant="ghost"
                                    onClick={() => setSearch('')}
                                    className="absolute right-1 top-1/2 transform -translate-y-1/2 h-6 w-6 p-0"
                                >
                                    <X size={14} />
                                </Button>
                            )}
                        </div>
                    </div>
                    <div className="max-h-60 overflow-y-auto p-3" onWheel={(e) => e.stopPropagation()}>
                        <div className="grid grid-cols-6 gap-2">
                            {displayIcons.map((iconName) => (
                                <Button
                                    key={iconName}
                                    type="button"
                                    variant="ghost"
                                    size="sm"
                                    onClick={() => handleSelect(iconName)}
                                    className="h-10 w-10 p-0 hover:bg-accent"
                                    title={iconName}
                                >
                                    {renderIcon(iconName, 20)}
                                </Button>
                            ))}
                        </div>
                        {filteredIcons.length === 0 && (
                            <div className="text-center text-muted-foreground py-4">
                                No icons found
                            </div>
                        )}
                    </div>
                </PopoverContent>
            </Popover>
        </div>
    );
}