"use client"

import { TutorChat } from "@/components/AI/TutorChat"
import { BrainCircuit, Sparkles } from "lucide-react"

export default function TutorChatPage() {
  return (
    <div className="h-[calc(100vh-100px)] w-full flex flex-col pt-4 max-w-7xl mx-auto px-4 gap-4">
      <div className="border-b border-border/50 pb-4">
        <div className="flex items-start justify-between gap-4 flex-wrap">
          <div>
            <h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-1">
              <span className="p-2.5 rounded-xl bg-cyan-50 dark:bg-[var(--cyan-ai-10)] border border-cyan-300/60 dark:border-[var(--cyan-ai-20)]">
                <BrainCircuit className="text-cyan-700 dark:text-[var(--cyan-ai)]" size={28} />
              </span>
              AI Tutor
            </h1>
            <p className="text-muted-foreground text-sm font-medium mt-1 pl-1">
              Your personal AI tutor for 24/7 concept explanations, doubt resolution, and step-by-step problem solving.
            </p>
          </div>
          <div className="flex items-center gap-2 shrink-0">
            <span className="text-xs font-bold uppercase tracking-wider text-[var(--cyan-ai)] bg-cyan-50 dark:bg-[var(--cyan-ai-10)] border border-cyan-300/60 dark:border-[var(--cyan-ai-20)] px-3 py-1.5 rounded-full flex items-center gap-1.5">
              <Sparkles size={12} /> AI Powered
            </span>
          </div>
        </div>
      </div>
      <div className="flex-1 rounded-3xl overflow-hidden border border-border/50 shadow-xl bg-background flex flex-col h-full">
        <TutorChat />
      </div>
    </div>
  )
}