components/ProjectTable.jsx

import React from 'react';
import { MoreHorizontal, AlertCircle, CheckCircle, Clock, PauseCircle } from 'lucide-react';

const statusConfig = {
  'In Progress': { color: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300', icon: Clock },
  'Planning': { color: 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300', icon: AlertCircle },
  'Review': { color: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300', icon: CheckCircle },
  'On Hold': { color: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300', icon: PauseCircle },
  'Completed': { color: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300', icon: CheckCircle },
};

const priorityConfig = {
  'High': 'text-red-600 bg-red-50 dark:bg-red-900/20 dark:text-red-400',
  'Medium': 'text-orange-600 bg-orange-50 dark:bg-orange-900/20 dark:text-orange-400',
  'Low': 'text-green-600 bg-green-50 dark:bg-green-900/20 dark:text-green-400',
  'Critical': 'text-red-800 bg-red-100 dark:bg-red-900/40 dark:text-red-200 font-bold',
};

export default function ProjectTable({ projects, loading }) {
  if (loading) {
    return (
      <div className="space-y-4">
        {[1,