```javascript
import { useState } from 'react'
import { supabase } from './supabaseClient'

export default function ProjectCard({ project, onUpdate }) {
  const [isEditing, setIsEditing] = useState(false)
  const [title, setTitle] = useState(project.title)
  const [description, setDescription] = useState(project.description)

  async function deleteProject() {
    const { error } = await supabase
      .from('user_projects')
      .delete()
      .eq('id', project.id)

    if (error) alert(error.message)
    else onUpdate()
  }

  async function updateProject() {
    const { error } = await supabase
      .from('user_projects')
      .update({ title, description })
      .eq('id', project.id)

    if (error) alert(error.message)
    else {
      onUpdate()
      setIsEditing(false)
    }
  }

  return (
    <div className="bg-gray-800 rounded-xl p-6 shadow-lg border border-gray-700 hover:border-primary/50 transition">
      {isEditing ? (
        <div className="space-y-4">
          <input
            type="text"
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            className="w-full bg-gray-700 rounded-lg px-4 py-2 text-white"
          />
          <textarea
            value={description}
            onChange={(e) => setDescription(e.target.value)}
            className="w-full bg-gray-700 rounded-lg px-4 py-2 text-white"
            rows="3"
          />
          <div className="flex space-x-2">
            <button
              onClick={updateProject}
              className="bg-primary hover:bg-secondary px-3 py-1 rounded-lg text-sm"
            >
              Save
            </button>
            <button
              onClick={() => setIsEditing(false)}
              className="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-lg text-sm"
            >
              Cancel
            </button>
          </div>
        </div>
      ) : (
        <div>
          <h3 className="text-xl font-bold mb-2">{project.title}</h3>
          <p className="text-gray-400 mb-4">{project.description}</p>
          <p className="text-xs text-gray-500">
            {new Date(project.created_at).toLocaleString()}
          </p>
          <div className="flex space-x-2 mt-4">
            <button
              onClick={() => setIsEditing(true)}
              className="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-lg text-sm"
            >
              Edit
            </button>
            <button
              onClick={deleteProject}
              className="bg-red-900 hover:bg-red-800 px-3 py-1 rounded-lg text-sm"
            >
              Delete
            </button>
          </div>
        </div>
      )}
    </div>
  )
}
```