Untitled

import React, { useState } from 'react';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Video, BookOpen, MessageSquare, Calculator } from 'lucide-react';

const LearningPlatform = () => {
  const [activeTab, setActiveTab] = useState('videos');

  // Sample data structure
  const content = {
    videos: [
      { id: 1, title: 'Structural Analysis Basics', url: '/placeholder-video-1' },
      { id: 2, title: 'Soil Mechanics', url: '/placeholder-video-2' },
    ],
    problems: [
      { id: 1, title: 'Beam Design', difficulty: 'Medium' },
      { id: 2, title: 'Foundation Analysis', difficulty: 'Hard' },
    ],
    discussions: [
      { id: 1, title: 'Steel Design Tips', replies: 15 },
      { id: 2, title: 'Seismic Analysis Help', replies: 23 },
    ]
  };

  return (
    <div className="w-full max-w-4xl mx-auto p-4">
      <Card>
        <CardHeader>
          <CardTitle className="text-2xl font-bold">Civil Engineering Learning Hub</CardTitle>
        </CardHeader>
        <CardContent>
          <Tabs defaultValue="videos" className="w-full">
            <TabsList className="grid w-full grid-cols-3 mb-4">
              <TabsTrigger value="videos" className="flex items-center gap-2">
                <Video className="w-4 h-4" />
                Video Lectures
              </TabsTrigger>
              <TabsTrigger value="problems" className="flex items-center gap-2">
                <Calculator className="w-4 h-4" />
                Practice Problems
              </TabsTrigger>
              <TabsTrigger value="discussions" className="flex items-center gap-2">
                <MessageSquare className="w-4 h-4" />
                Discussion Forum
              </TabsTrigger>
            </TabsList>

            <TabsContent value="videos">
              <div className="grid gap-4">
                {content.videos.map(video => (
                  <Card key={video.id} className="p-4">
                    <div className="flex items-center gap-4">
                      <Video className="w-8 h-8 text-blue-500" />
                      <div>
                        <h3 className="font-semibold">{video.title}</h3>
                        <p className="text-sm text-gray-500">Click to watch lecture</p>
                      </div>
                    </div>
                  </Card>
                ))}
              </div>
            </TabsContent>

            <TabsContent value="problems">
              <div className="grid gap-4">
                {content.problems.map(problem => (
                  <Card key={problem.id} className="p-4">
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-4">
                        <Calculator className="w-8 h-8 text-green-500" />
                        <div>
                          <h3 className="font-semibold">{problem.title}</h3>
                          <p className="text-sm text-gray-500">Difficulty: {problem.difficulty}</p>
                        </div>
                      </div>
                      <button className="px-4 py-2 bg-blue-500 text-white rounded-md">
                        Start
                      </button>
                    </div>
                  </Card>
                ))}
              </div>
            </TabsContent>

            <TabsContent value="discussions">
              <div className="grid gap-4">
                {content.discussions.map(discussion => (
                  <Card key={discussion.id} className="p-4">
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-4">
                        <MessageSquare className="w-8 h-8 text-purple-500" />
                        <div>
                          <h3 className="font-semibold">{discussion.title}</h3>
                          <p className="text-sm text-gray-500">{discussion.replies} replies</p>
                        </div>
                      </div>
                      <button className="px-4 py-2 bg-purple-500 text-white rounded-md">
                        Join Discussion
                      </button>
                    </div>
                  </Card>
                ))}
              </div>
            </TabsContent>
          </Tabs>
        </CardContent>
      </Card>
    </div>
  );
};

export default LearningPlatform;