import { PieChart, Pie, Cell, ResponsiveContainer } from 'recharts';
import { Info, Zap } from 'lucide-react';
import type { IconType } from 'react-icons';
import {
    FaBehance, FaPinterest, FaTrello, FaFoursquare,
    FaWordpress, FaMedium, FaStackOverflow,
    FaYoutube, FaPodcast, FaQuora, FaReddit, FaTelegram
} from 'react-icons/fa';
import { SiAboutdotme } from 'react-icons/si';

type SocialIconItem =
    | { Icon: IconType; className: string }
    | { icon: string; className: string };

const data = [
    { name: 'Branded Aesthetics Social Signals', value: 30, color: '#4E73DF' },
    { name: 'Local + Medical-Cosmetic Citations', value: 30, color: '#5A9FFF' },
    { name: 'Web 2.0 Microblogging Sites', value: 20, color: '#36B37E' },
    { name: 'Multimedia Content & Beauty Visuals', value: 20, color: '#FDB91A' },
    { name: 'Community and UGC Signals', value: 10, color: '#EF5350' },
];

const socialIcons: SocialIconItem[][] = [
    [
        { Icon: FaBehance, className: "text-blue-600" },
        { Icon: FaPinterest, className: "text-red-600" },
        { Icon: FaTrello, className: "text-red-500" }
    ],
    [
        { Icon: FaFoursquare, className: "text-pink-500" },
        { Icon: FaMedium, className: "text-yellow-500" },
        { Icon: SiAboutdotme, className: "text-cyan-400" }
    ],
    [
        { Icon: FaWordpress, className: "text-blue-700" },
        { Icon: FaMedium, className: "text-gray-900" },
        { Icon: FaStackOverflow, className: "text-orange-500" }
    ],
    [
        { Icon: FaYoutube, className: "text-red-600" },
        { Icon: FaPodcast, className: "text-purple-500" },
        { icon: '⦿', className: "text-red-500 text-2xl" }
    ],
    [
        { Icon: FaReddit, className: "text-orange-600" },
        { Icon: FaQuora, className: "text-red-700" },
        { Icon: FaTelegram, className: "text-blue-400" }
    ],
];

const BecomeTheSource = () => {
    return (
        <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-8">
            <div className="mb-8">
                <h2 className="text-2xl font-bold text-gray-900 mb-2">
                    Become the Source
                </h2>
                <p className="text-gray-500">
                    Custom Authority Beacons & Backlink Strategy, Tailored for{' '}
                    <span className="text-gray-900 font-semibold">Medical Spas</span>
                </p>
            </div>

            <div className="flex items-center mb-8">
                <div className="space-y-4 fl ">
                    <div className="h-80 w-[342px] flex items-center justify-center">
                        <ResponsiveContainer width="100%" height="100%">
                            <PieChart>
                                <Pie
                                    data={data}
                                    cx="50%"
                                    cy="50%"
                                    innerRadius={80}
                                    outerRadius={140}
                                    paddingAngle={2}
                                    dataKey="value"
                                >
                                    {data.map((entry, index) => {
                                        return <Cell key={`cell-${index}`} fill={entry.color} />;
                                    })}
                                </Pie>
                            </PieChart>
                        </ResponsiveContainer>
                    </div>


                </div>

                <div className="space-y-2">
                    {data.map((item, index) => {
                        return (
                            <div key={index} className="flex flex-col items-start gap-1">
                                <div className="flex items-center gap-1">
                                    <div
                                        className="w-3 h-3 rounded-full flex-shrink-0"
                                        style={{ backgroundColor: item.color }}
                                    />
                                    <span className="text-lg font-bold text-gray-900">{item.value}%</span>
                                    <Info className="w-4 h-4 text-gray-400" />
                                </div>
                                <span className="text-sm text-gray-700">{item.name}</span>
                            </div>
                        );
                    })}
                </div>
                <div className="flex items-center justify-center">
                    <div className="flex flex-col gap-3">
                        {socialIcons.map((row, rowIndex) => {
                            return (
                                <div key={rowIndex} className="flex gap-0">
                                    {row.map((item, iconIndex) => {
                                        return (
                                            <div
                                                key={iconIndex}
                                                className="w-10 h-10 rounded-xl ?flex items-center justify-center text-2xl"
                                            >
                                                {'Icon' in item ? (
                                                    (() => {
                                                        const IconComponent = item.Icon;
                                                        return <IconComponent className={item.className} />;
                                                    })()
                                                ) : (
                                                    <span className={item.className}>{item.icon}</span>
                                                )}
                                            </div>
                                        );
                                    })}
                                </div>
                            );
                        })}
                    </div>
                </div>
            </div>

            <button className="w-[65%] px-6 rounded-2xl bg-white border-4 border-transparent bg-gradient-to-r from-blue-500 via-red-500 via-orange-400 via-yellow-400 to-green-500 bg-clip-padding relative group hover:shadow-xl transition-all py-6 mx-auto">
                <div className="absolute inset-0 bg-white rounded-xl m-[3px] flex items-center justify-center gap-3">
                    <div className="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center">
                        <Zap className="w-5 h-5 text-white fill-white" />
                    </div>
                    <span className="text-md font-semibold text-gray-900">
                        Add your Keywords and Become the Source
                    </span>
                </div>
            </button>
        </div>
    );
};

export default BecomeTheSource;

