anycall-h5/components/AuthenticityScore.tsx

import React from 'react';
import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip } from 'recharts';

interface AuthenticityScoreProps {
  videoVerificationScore: number;
  socialBindingScore: number;
  cloneMaturityScore: number;
}

const ScoreBreakdownBar: React.FC<{ label: string; score: number; maxScore: number; color: string }> = ({ label, score, maxScore, color }) => {
    const colorVariants: {[key: string]: string} = {
        'text-blue-500': 'from-blue-400 to-blue-600',
        'text-indigo-500': 'from-indigo-400 to-indigo-600',
        'text-green-500': 'from-green-400 to-green-600',
    }
    return (
        <div>
            <div className="flex justify-between items-center mb-1">
            <span className="text-sm font-medium text-slate-600">{label}</span>
            <span className={`text-sm font-bold ${color}`}>{score} / {maxScore}</span>
            </div>
            <div className="w-full bg-slate-200 rounded-full h-2.5">
            <div className={`bg-gradient-to-r ${colorVariants[color] || 'from-slate-400 to-slate-600'} h-2.5 rounded-full`} style={{ width: `${(score / maxScore) * 100}%` }}></div>
            </div>
        </div>
    );
};

const AuthenticityScore: React.FC<AuthenticityScoreProps> = ({ videoVerificationScore, socialBindingScore, cloneMaturityScore }) => {
  const totalScore = videoVerificationScore + socialBindingScore + cloneMaturityScore;
  const maxTotalScore = 120; // 15 + 45 + 60
  const scoreData = [
    { name: 'Score', value: totalScore },
    { name: 'Remaining', value: maxTotalScore - totalScore },
  ];
  const COLORS = ['#3b82f6', '#e5e7eb'];

  return (
    <div className="bg-white rounded-2xl border border-slate-200 p-6">
      <h2 className="text-xl font-bold text-slate-800 mb-4 text-center">Authenticity Score</h2>
      <div className="flex flex-col md:flex-row items-center gap-6 md:gap-8">
        <div className="w-48 h-48 relative">
          <ResponsiveContainer width="100%" height="100%">
            <PieChart>
              <Pie
                data={scoreData}
                cx="50%"
                cy="50%"
                innerRadius={60}
                outerRadius={80}
                startAngle={90}
                endAngle={450}
                paddingAngle={0}
                dataKey="value"
                cornerRadius={10}
              >
                {scoreData.map((entry, index) => (
                  <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} stroke="none"/>
                ))}
              </Pie>
              <Tooltip formatter={(value: number, name: string) => [value, '']} />
            </PieChart>
          </ResponsiveContainer>
          <div className="absolute inset-0 flex flex-col items-center justify-center">
            <span className="text-4xl font-extrabold text-blue-600">{totalScore}</span>
            <span className="text-slate-500">/ {maxTotalScore}</span>
          </div>
        </div>
        <div className="flex-1 w-full space-y-4">
          <ScoreBreakdownBar label="Video Verification" score={videoVerificationScore} maxScore={15} color="text-green-500" />
          <ScoreBreakdownBar label="Social Account Binding" score={socialBindingScore} maxScore={45} color="text-blue-500" />
          <ScoreBreakdownBar label="Digital Clone Maturity" score={cloneMaturityScore} maxScore={60} color="text-indigo-500" />
        </div>
      </div>
    </div>
  );
};

export default AuthenticityScore;