// src/components/DiscussionList.tsx
"use client";

import React, { useState } from "react";
import { useSearchParams } from "next/navigation";
import Image from "next/image";
import { Card, CardContent } from "@/components/ui/card";

const SearchFeature: React.FC = () => {
  const [searchQuery, setSearchQuery] = useState("");
  const searchParams = useSearchParams();

  const discussions = [
    {
      id: 1,
      title: "Introduction to Computer Science",
      description:
        "Learn the basics of programming and computer science concepts",
      publishedDate: "2025-01-10",
      enrolledStudent: 156,
      activeDiscussionCount: 23,
      publishedBy: "Prof. Smith",
    },
    {
      id: 2,
      title: "Advanced Mathematics",
      description: "Covering calculus, linear algebra and statistics",
      publishedDate: "2025-01-09",
      enrolledStudent: 89,
      activeDiscussionCount: 15,
      publishedBy: "Dr. Johnson",
    },
    {
      id: 3,
      title: "Digital Marketing Fundamentals",
      description: "Understanding modern marketing strategies",
      publishedDate: "2025-01-08",
      enrolledStudent: 234,
      activeDiscussionCount: 45,
      publishedBy: "Prof. Williams",
    },
  ];

  return (
    <div className="container mx-auto p-6 space-y-6">
      {/* Discussion Cards */}
      <div className="space-y-4">
        {discussions.map((discussion) => (
          <Card
            key={discussion.id}
            className="hover:shadow-lg transition-shadow"
          >
            <CardContent className="p-6 flex gap-4">
              <div >
                <Image src="https://placehold.jp/400x250.png"alt="placeholder" width={400} height={250} className="w-[400] h-auto rounded-2xl"/>
              </div>
              <div>
                <div className="flex items-start justify-between">
                  <div className="space-y-2">
                    <h3 className="text-xl font-semibold text-purple-700">
                      {discussion.title}
                    </h3>
                    <p className="text-gray-600">{discussion.description}</p>
                  </div>
                </div>

                <div className="mt-4 flex flex-wrap gap-4 text-sm text-gray-500">
                  <span className="flex items-center">
                    <span className="font-medium">Published:</span>
                    <span className="ml-1">{discussion.publishedDate}</span>
                  </span>
                  <span className="flex items-center">
                    <span className="font-medium">Enrolled:</span>
                    <span className="ml-1">
                      {discussion.enrolledStudent} students
                    </span>
                  </span>
                  <span className="flex items-center">
                    <span className="font-medium">Active Discussions:</span>
                    <span className="ml-1">
                      {discussion.activeDiscussionCount}
                    </span>
                  </span>
                  <span className="flex items-center">
                    <span className="font-medium">Published by:</span>
                    <span className="ml-1">{discussion.publishedBy}</span>
                  </span>
                </div>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
};

export default SearchFeature;
