import React from 'react';
import { MockUsers } from '../data/MockUsers';

const ProfilePage: React.FC = () => {
  // Find Neo Quantum in MockUsers
  const profileUser = MockUsers.find(user => user.name === "Neo Quantum");

  // Default values if user not found
  const defaultName = "TestUser";
  const defaultEmail = "user@example.com";
  const defaultDreamCount = 0;
  const defaultStreakDays = 0;

  return (
    <div className="page min-h-screen p-4">
      <div className="dreamPanel flex flex-col items-center p-6">
        {/* Profile Picture */}
        <div className="w-32 h-32 rounded-full overflow-hidden mb-4 border-4 border-accent">
          <img 
            src={profileUser ? `/assets/profiles/${profileUser.profilePicture}` : `https://ui-avatars.com/api/?name=${defaultName}&background=random&color=fff&size=128`} 
            alt={profileUser ? profileUser.name : defaultName} 
            className="w-full h-full object-cover"
          />
        </div>

        {/* User Information */}
        <div className="text-center">
          <h2 className="text-xl font-bold mb-2">{profileUser ? profileUser.name : defaultName}</h2>
          <p className="text-text-muted mb-4">{profileUser ? profileUser.email : defaultEmail}</p>

          <div className="grid grid-cols-2 gap-4 mt-6 text-center">
            <div className="dreamPanel">
              <p className="font-bold text-2xl">{profileUser ? profileUser.dreamCount : defaultDreamCount}</p>
              <p className="text-sm text-text-muted">Dreams</p>
            </div>
            <div className="dreamPanel">
              <p className="font-bold text-2xl">{profileUser ? profileUser.streakDays : defaultStreakDays}</p>
              <p className="text-sm text-text-muted">Days Streak</p>
            </div>
          </div>

          <div className="mt-8">
            <h3 className="text-lg font-semibold mb-2">Account Settings</h3>
            <div className="dreamPanel text-left">
              <div className="flex justify-between items-center py-2">
                <span>Notifications</span>
                <label className="theme-toggle">
                  <input type="checkbox" defaultChecked />
                  <span className="slider"></span>
                </label>
              </div>
              <div className="flex justify-between items-center py-2">
                <span>Privacy</span>
                <label className="theme-toggle">
                  <input type="checkbox" />
                  <span className="slider"></span>
                </label>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ProfilePage;