import { useAuthStore } from '../stores/auth'

export default function DashboardPage() {
  const { user } = useAuthStore()

  return (
    <div className="p-6">
      <h1 className="text-3xl font-bold mb-4">Dashboard</h1>
      <p className="text-lg mb-4">
        Welcome back, {user?.display_name || user?.email || 'User'}!
      </p>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div className="p-4 rounded-lg border border-border bg-surface">
          <h2 className="text-xl font-semibold mb-2">Projects</h2>
          <p className="text-gray-400">Manage your projects and repositories</p>
        </div>
        <div className="p-4 rounded-lg border border-border bg-surface">
          <h2 className="text-xl font-semibold mb-2">Tools</h2>
          <p className="text-gray-400">Spawn and manage development tools</p>
        </div>
        <div className="p-4 rounded-lg border border-border bg-surface">
          <h2 className="text-xl font-semibold mb-2">Settings</h2>
          <p className="text-gray-400">Configure your account and preferences</p>
        </div>
      </div>
    </div>
  )
}