import { useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { MessageCircle } from "lucide-react";
import { motion } from "framer-motion";

export default function ChatApp() {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState("");

  const sendMessage = () => {
    if (input.trim()) {
      setMessages([...messages, { text: input, sender: "You" }]);
      setInput("");
    }
  };

  return (
    <div className="flex flex-col items-center justify-center min-h-screen p-4 bg-gray-900 text-white">
      <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.5 }}>
        <h1 className="text-3xl font-bold mb-4 flex items-center">
          <MessageCircle className="mr-2" /> Chat App
        </h1>
      </motion.div>
      <Card className="w-full max-w-md p-4 bg-gray-800 rounded-2xl shadow-lg">
        <CardContent className="h-96 overflow-y-auto space-y-2">
          {messages.map((msg, index) => (
            <motion.div
              key={index}
              initial={{ x: 50, opacity: 0 }}
              animate={{ x: 0, opacity: 1 }}
              transition={{ duration: 0.3 }}
              className="p-2 rounded-lg bg-gray-700 text-sm"
            >
              <strong>{msg.sender}:</strong> {msg.text}
            </motion.div>
          ))}
        </CardContent>
        <div className="flex gap-2 mt-4">
          <Input
            value={input}
            onChange={(e) => setInput(e.target.value)}
            className="flex-1 bg-gray-700 text-white border-none"
            placeholder="Type a message..."
          />
          <Button onClick={sendMessage} className="bg-blue-500 hover:bg-blue-600">
            Send
          </Button>
        </div>
      </Card>
    </div>
  );
}