import { PieChart, Pie, Cell, ResponsiveContainer, Legend } from 'recharts';
import { Lightbulb } from 'lucide-react';

const data = [
  { name: 'Consumer Health Giants', value: 40, color: '#6B8FE8' },
  { name: 'Mainstream Media Sections', value: 30, color: '#4E73DF' },
  { name: 'Elite Medical Journals', value: 20, color: '#2E5BC7' },
  { name: 'Specialty Platforms', value: 10, color: '#FDB91A' },
  { name: 'Professional/Academic Crossovers', value: 3, color: '#EF5350' },
];

const SourcesChart = () => {
  return (
    <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-8">
      <h2 className="text-2xl font-semibold text-gray-900 mb-8">
        AI Frequently Cited Sources in Healthcare
      </h2>

      <div className="grid md:grid-cols-2 gap-8 items-center">
        <div className="h-80 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) => (
                  <Cell key={`cell-${index}`} fill={entry.color} />
                ))}
              </Pie>
            </PieChart>
          </ResponsiveContainer>
        </div>

        <div className="space-y-3">
          {data.map((item, index) => (
            <div
              key={index}
              className="flex items-center gap-4 p-4 rounded-xl bg-gray-50 hover:bg-gray-100 transition-colors"
            >
              <div
                className="w-3 h-3 rounded-full flex-shrink-0"
                style={{ backgroundColor: item.color }}
              />
              <div className="flex-1">
                <span className="text-2xl font-bold text-gray-900">
                  {item.value}%
                </span>
                <span className="ml-2 text-gray-600">{item.name}</span>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="mt-8 bg-blue-50 rounded-xl p-6">
        <div className="flex items-start gap-3">
          <Lightbulb className="w-6 h-6 text-blue-600 flex-shrink-0 mt-0.5" />
          <div>
            <h3 className="font-semibold text-gray-900 mb-2">
              How AI and LLMs Choose Their Sources
            </h3>
            <p className="text-gray-700 leading-relaxed">
              Our analysis reveals distinct patterns in how leading AIs source and prioritize
              industry information. For example, ChatGPT leans heavily on user-generated content,
              while Google's AI Overviews favors authoritative tech review sites. Across the
              board, backlink quality plays a crucial role, with...{' '}
              <button className="text-blue-600 font-medium hover:text-blue-700">
                read more
              </button>
            </p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default SourcesChart;