import React, { useState } from 'react';
import AppRoutes from './routes';
import type { ContactData } from './types';

const App: React.FC = () => {
  // Mock data for the contact, now managed by state
  const [contactData, setContactData] = useState<ContactData>({
    name: 'Alex Doe',
    avatarUrl: 'https://picsum.photos/200',
    virtualId: 'VID-2024-8A4B-C7D2-F1E0',
    bio: 'Senior Frontend Engineer with a passion for creating beautiful and functional user interfaces. Expert in React, TypeScript, and modern web technologies. In my free time, I explore the intersection of AI and art.',
    socials: {
      linkedin: 'https://www.linkedin.com/in/alex-doe',
      x: 'https://x.com/alex_doe',
      github: 'https://github.com/alexdoe',
      tiktok: 'https://www.tiktok.com/@alexdoe.dev',
      instagram: 'https://www.instagram.com/alex.doe',
      facebook: 'https://www.facebook.com/alex.doe',
      discord: 'alex.doe#1234',
    },
    authenticityScore: {
      videoVerification: 15, // max 15
      socialBinding: 45, // max 45
      cloneMaturity: 48, // max 60
    },
    videoIntroUrl: 'https://storage.googleapis.com/web-dev-assets/video-introduction-demo.mp4',
    videoPosterUrl: 'https://picsum.photos/seed/video-poster/800/450',
  });

  const handleSave = (newData: ContactData) => {
    setContactData(newData);
  };

  return (
    <div className="min-h-screen bg-slate-50 font-sans text-slate-800">
      <AppRoutes contactData={contactData} onSave={handleSave} />
      <footer className="text-center p-4 text-slate-500 text-sm">
        <p>&copy; 2024 Virtual Identity System. All rights reserved.</p>
      </footer>
    </div>
  );
};

export default App;