import { useState } from 'react'
import { FaFolder, FaPlus } from 'react-icons/fa6'

export default function ProjectsPage() {
  const [projects] = useState([])

  return (
    <div className="main-content">
      <header className="text-center mb-2">
        <h2>Projects</h2>
      </header>

      <div className="text-center mb-2">
        <button className="btn btn-teal">
          <FaPlus /> New Project
        </button>
      </div>

      {projects.length === 0 ? (
        <div className="text-center p-4">
          <FaFolder size={64} className="text-grey" />
          <p className="text-grey mt-2">No projects yet. Create your first project to get started.</p>
        </div>
      ) : (
        <div className="projects-grid">
          {projects.map(project => (
            <div key={project.$id} className="project-card">
              <h4>{project.name}</h4>
              <p className="text-grey">{project.description}</p>
              <div className="project-meta">
                <span>{project.ticketCount || 0} tickets</span>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  )
}
