'use client'

import { useTheme } from '@/lib/ThemeContext'
import { Sidebar } from '@/components/Sidebar'
import { CompanionDashboard } from '@/components/companion/CompanionDashboard'
import { ThemeToggle } from '@/components/ThemeToggle'
import { LanguageDropdown } from '@/components/LanguageDropdown'

export default function CompanionPage() {
  const { isDark } = useTheme()

  return (
    <div className={`min-h-screen flex relative overflow-hidden ${
      isDark
        ? 'bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-800'
        : 'bg-gradient-to-br from-slate-100 via-blue-50 to-indigo-100'
    }`}>
      {/* Animated Background Blobs */}
      <div className={`absolute -top-40 -right-40 w-96 h-96 rounded-full mix-blend-multiply filter blur-3xl animate-blob ${
        isDark ? 'bg-purple-500 opacity-30' : 'bg-purple-300 opacity-40'
      }`} />
      <div className={`absolute top-1/2 -left-40 w-96 h-96 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-2000 ${
        isDark ? 'bg-pink-500 opacity-30' : 'bg-pink-300 opacity-40'
      }`} />

      {/* Sidebar */}
      <div className="relative z-10 p-4">
        <Sidebar />
      </div>

      {/* Main Content */}
      <div className="flex-1 flex flex-col relative z-10 p-4 overflow-hidden">
        {/* Header */}
        <div className="flex items-center justify-between mb-4">
          <h1 className={`text-2xl font-bold ${isDark ? 'text-white' : 'text-slate-900'}`}>
            Companion
          </h1>
          <div className="flex items-center gap-2">
            <ThemeToggle />
            <LanguageDropdown />
          </div>
        </div>

        {/* Companion Dashboard */}
        <div className="flex-1 overflow-auto">
          <CompanionDashboard />
        </div>
      </div>
    </div>
  )
}