import React from 'react';
import { Link } from 'react-router-dom';
import VirtualIdCard from './components/VirtualIdCard';
import AuthenticityScore from './components/AuthenticityScore';
import Bio from './components/Bio';
import SocialLinks from './components/SocialLinks';
import VideoIntroduction from './components/VideoIntroduction';
import type { ContactData } from './types';

interface ContactPageProps {
  data: ContactData;
}

const ContactPage: React.FC<ContactPageProps> = ({ data }) => {
  const totalScore = data.authenticityScore.videoVerification + data.authenticityScore.socialBinding + data.authenticityScore.cloneMaturity;

  return (
    <main className="max-w-3xl mx-auto p-4 sm:p-6 md:p-8">
      <div className="space-y-8">
        <div className="flex justify-between items-center mb-4">
            <h1 className="text-2xl font-bold text-slate-800">Contact Profile</h1>
            <div>
                <Link to="/" className="text-sm text-slate-600 hover:text-blue-600 mr-4">Home</Link>
                <Link to="/edit" className="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700">Edit Page</Link>
            </div>
        </div>
        <VirtualIdCard 
          name={data.name}
          avatarUrl={data.avatarUrl}
          virtualId={data.virtualId}
          totalScore={totalScore}
        />
        
        <AuthenticityScore 
          videoVerificationScore={data.authenticityScore.videoVerification}
          socialBindingScore={data.authenticityScore.socialBinding}
          cloneMaturityScore={data.authenticityScore.cloneMaturity}
        />

        <Bio text={data.bio} />

        <VideoIntroduction
          videoUrl={data.videoIntroUrl}
          posterUrl={data.videoPosterUrl}
        />

        <SocialLinks links={data.socials} />

      </div>
    </main>
  );
};

export default ContactPage;