import React from 'react'
import QuickActions from './components/QuickActions'
import ActivityFeed from './components/ActivityFeed'
import CreatorAnalytics from './components/CreatorAnalytics'
import TrendingArtworks from './components/TrendingArtworks'
import RecommendedCreators from './components/RecommendedCreators'

export default function DashboardPage({ username, isCreator }) {
  return (
    <div className="min-h-screen bg-gray-900 text-gray-100">
      <div className="mx-auto w-full max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
        <header className="mb-6 rounded-xl border border-gray-700 bg-gray-800/90 p-6 shadow-lg">
          <p className="text-sm uppercase tracking-[0.2em] text-gray-400">Skinbase Nova</p>
          <h1 className="mt-2 text-2xl font-semibold sm:text-3xl">Welcome back {username}</h1>
          <p className="mt-2 text-sm text-gray-300">
            Your dashboard combines activity, creator tools, analytics, and discovery in one place.
          </p>
        </header>

        <QuickActions isCreator={isCreator} />

        <div className="mt-6 grid grid-cols-1 gap-6 xl:grid-cols-12">
          <section className="xl:col-span-7">
            <ActivityFeed />
          </section>

          <section className="xl:col-span-5">
            <CreatorAnalytics isCreator={isCreator} />
          </section>
        </div>

        <div className="mt-6 grid grid-cols-1 gap-6 lg:grid-cols-2">
          <TrendingArtworks />
          <RecommendedCreators />
        </div>
      </div>
    </div>
  )
}