/**
 * Project Grid App - Grid view of all projects
 */

import React, { useState, useEffect } from 'react';

export function ProjectGrid() {
  const [projects, setProjects] = useState<any[]>([]);

  useEffect(() => {
    // Simulated data
    setProjects([
      { id: 1, name: 'Website Redesign', color: '#1d8cf8' },
      { id: 2, name: 'Mobile App', color: '#ff8d72' },
      { id: 3, name: 'Marketing Campaign', color: '#00bf9a' },
      { id: 4, name: 'Product Launch', color: '#fd5d93' },
    ]);
  }, []);

  return (
    <div style={{ padding: '20px', fontFamily: 'system-ui, sans-serif' }}>
      <h1 style={{ fontSize: '24px', marginBottom: '20px' }}>All Projects</h1>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))', gap: '20px' }}>
        {projects.map((project) => (
          <div key={project.id} style={{ 
            border: '1px solid #ddd', 
            borderRadius: '8px', 
            padding: '24px', 
            background: 'white',
            borderTop: `4px solid ${project.color}`,
            cursor: 'pointer',
            transition: 'transform 0.2s',
          }}
          onMouseEnter={(e) => (e.currentTarget as HTMLDivElement).style.transform = 'translateY(-4px)'}
          onMouseLeave={(e) => (e.currentTarget as HTMLDivElement).style.transform = 'translateY(0)'}
          >
            <h3 style={{ fontSize: '18px', margin: 0 }}>{project.name}</h3>
          </div>
        ))}
      </div>
    </div>
  );
}
