import React, { useState } from 'react';
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
import { Textarea } from "@/components/ui/textarea";
import { ScrollArea } from "@/components/ui/scroll-area";
import { MessageCircle, ThumbsUp, Reply } from "lucide-react";

const DiscussionSection = () => {
  const [comment, setComment] = useState('');
  const [discussions, setDiscussions] = useState([
    {
      id: 1,
      user: 'Sarah Chen',
      avatar: '/api/placeholder/32/32',
      content: 'This is really interesting! I particularly liked the section about state management.',
      likes: 12,
      replies: 2,
      timestamp: '2 hours ago'
    },
    {
      id: 2,
      user: 'Alex Kim',
      avatar: '/api/placeholder/32/32',
      content: 'Great explanation! Could you elaborate more on the useEffect implementation?',
      likes: 8,
      replies: 1,
      timestamp: '1 hour ago'
    }
  ]);

  const handleSubmit = () => {
    if (comment.trim()) {
      const newComment = {
        id: discussions.length + 1,
        user: 'Current User',
        avatar: '/api/placeholder/32/32',
        content: comment,
        likes: 0,
        replies: 0,
        timestamp: 'Just now'
      };
      setDiscussions([...discussions, newComment]);
      setComment('');
    }
  };

  return (
    <Card className="w-full max-w-2xl mx-auto">
      <CardContent className="p-6">
        <div className="mb-6">
          <div className="flex items-start gap-4">
            <Avatar className="w-8 h-8">
              <AvatarImage src="/api/placeholder/32/32" alt="User" />
              <AvatarFallback>U</AvatarFallback>
            </Avatar>
            <div className="flex-1">
              <Textarea
                placeholder="Add to the discussion..."
                value={comment}
                onChange={(e) => setComment(e.target.value)}
                className="min-h-24 mb-2"
              />
              <Button onClick={handleSubmit} className="float-right">
                Post Comment
              </Button>
            </div>
          </div>
        </div>

        <ScrollArea className="h-96">
          <div className="space-y-6">
            {discussions.map((discussion) => (
              <div key={discussion.id} className="flex gap-4">
                <Avatar className="w-8 h-8">
                  <AvatarImage src={discussion.avatar} alt={discussion.user} />
                  <AvatarFallback>{discussion.user[0]}</AvatarFallback>
                </Avatar>
                <div className="flex-1">
                  <div className="flex items-center gap-2 mb-1">
                    <span className="font-medium">{discussion.user}</span>
                    <span className="text-sm text-gray-500">{discussion.timestamp}</span>
                  </div>
                  <p className="text-gray-700 mb-2">{discussion.content}</p>
                  <div className="flex items-center gap-4">
                    <button className="flex items-center gap-1 text-sm text-gray-500 hover:text-gray-700">
                      <ThumbsUp className="w-4 h-4" />
                      {discussion.likes}
                    </button>
                    <button className="flex items-center gap-1 text-sm text-gray-500 hover:text-gray-700">
                      <Reply className="w-4 h-4" />
                      Reply
                    </button>
                    <button className="flex items-center gap-1 text-sm text-gray-500 hover:text-gray-700">
                      <MessageCircle className="w-4 h-4" />
                      {discussion.replies} replies
                    </button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </ScrollArea>
      </CardContent>
    </Card>
  );
};

export default DiscussionSection;