'use client'

import { Language } from '@/lib/types'
import { t } from '@/lib/i18n'
import { Bot } from 'lucide-react'
import GradientText from '../ui/GradientText'
import FadeInView from '../ui/FadeInView'
import ChatInterface from '../ui/ChatInterface'
import LiveIndicator from '../ui/LiveIndicator'

interface AIQASlideProps {
  lang: Language
}

export default function AIQASlide({ lang }: AIQASlideProps) {
  const i = t(lang)

  return (
    <div>
      <FadeInView className="text-center mb-8">
        <div className="flex items-center justify-center gap-3 mb-4">
          <div className="w-12 h-12 rounded-xl bg-indigo-500/20 flex items-center justify-center">
            <Bot className="w-6 h-6 text-indigo-400" />
          </div>
          <LiveIndicator />
        </div>
        <h2 className="text-4xl md:text-5xl font-bold mb-3">
          <GradientText>{i.aiqa.title}</GradientText>
        </h2>
        <p className="text-lg text-white/50 max-w-2xl mx-auto">{i.aiqa.subtitle}</p>
      </FadeInView>

      <FadeInView delay={0.3}>
        <div className="max-w-3xl mx-auto bg-white/[0.04] border border-white/10 rounded-2xl p-6">
          <ChatInterface lang={lang} />
        </div>
      </FadeInView>
    </div>
  )
}