// React Portfolio Component
import React, { useState, useEffect } from 'react'
import { Card, Button } from '@/components/ui'

const Portfolio = () => {
  const [projects, setProjects] = useState([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    // Fetch portfolio data
    fetchProjects()
      .then(data => {
        setProjects(data)
        setLoading(false)
      })
      .catch(err => console.error(err))
  }, [])

  return (
    <div className="portfolio-container">
      <h1>Welcome to My Portfolio</h1>
      {loading ? (
        <div>Loading...</div>
      ) : (
        <ProjectGrid projects={projects} />
      )}
    </div>
  )
}

// Next.js API Route
import { NextRequest, NextResponse } from 'next/server'
import { connectDB } from '@/lib/database'

export async function GET(request: NextRequest) {
  try {
    const db = await connectDB()
    const projects = await db
      .collection('projects')
      .find({})
      .toArray()

    return NextResponse.json({ 
      success: true,
      projects 
    })
  } catch (error) {
    console.error('Database error:', error)
    return NextResponse.json(
      { error: 'Failed to fetch projects' },
      { status: 500 }
    )
  }
}