"use client"

import { ComponentContainer } from "@/components/ui/component-container"
import { SectionHeading } from "@/components/ui/section-heading"
import { AIChatInterfaceBlock } from "@/components/blocks/ai-chat-interface-block"

export function AIChatInterfaceSection() {
  return (
    <div className="space-y-8">
      <SectionHeading
        title="AI Chat Interface"
        description="A modern chat interface for AI assistants with message history, typing indicators, and interactive elements."
      />

      <ComponentContainer
        title="AI Chat Interface"
        description="A responsive chat interface with user and AI messages, typing indicators, and message actions."
        defaultTab="preview"
        children={<AIChatInterfaceBlock />}
        code={`// AI Chat Interface Component
import { useState } from "react"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Card, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Send, Bot } from 'lucide-react'

export function AIChatInterface() {
  const [input, setInput] = useState("")
  const [messages, setMessages] = useState([
    {
      id: "1",
      content: "Hello! How can I help you today?",
      role: "assistant",
      timestamp: new Date(),
    }
  ])

  return (
    <Card className="w-full max-w-[600px] h-[600px] flex flex-col">
      <CardHeader className="border-b px-4 py-3">
        <div className="flex items-center gap-3">
          <Avatar className="h-8 w-8">
            <AvatarFallback>
              <Bot size={16} />
            </AvatarFallback>
          </Avatar>
          <CardTitle className="text-base font-medium">AI Assistant</CardTitle>
        </div>
      </CardHeader>
      <ScrollArea className="flex-1 p-4">
        <div className="space-y-4">
          {messages.map((message) => (
            <div key={message.id} className="flex justify-start gap-2">
              <Avatar className="h-8 w-8">
                <AvatarFallback>
                  <Bot size={16} />
                </AvatarFallback>
              </Avatar>
              <div className="rounded-lg p-3 bg-muted">
                <p className="text-sm">{message.content}</p>
              </div>
            </div>
          ))}
        </div>
      </ScrollArea>
      <CardFooter className="border-t p-3">
        <div className="flex w-full items-center gap-2">
          <Input
            value={input}
            onChange={(e) => setInput(e.target.value)}
            placeholder="Type a message..."
            className="flex-1"
          />
          <Button type="submit" size="icon">
            <Send className="h-4 w-4" />
          </Button>
        </div>
      </CardFooter>
    </Card>
  )
}`}
      />
    </div>
  )
}