React.ts

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

const IdeaDiscussionPlatform = () => {
  const [selectedSector, setSelectedSector] = useState('software');
  
  const sectors = [
    { id: 'software', name: 'Software Development' },
    { id: 'manufacturing', name: 'Manufacturing' },
    { id: 'healthcare', name: 'Healthcare' },
    { id: 'finance', name: 'Financial Services' }
  ];

  const mockPosts = {
    software: [
      { id: 1, title: 'AI Implementation Strategy', author: 'John Doe', company: 'TechCorp', likes: 45, comments: 12 },
      { id: 2, title: 'Cloud Migration Best Practices', author: 'Jane Smith', company: null, likes: 32, comments: 8 }
    ],
    manufacturing: [
      { id: 1, title: 'Lean Manufacturing Implementation', author: 'Mike Johnson', company: 'Industrial Inc', likes: 28, comments: 15 },
      { id: 2, title: 'Smart Factory Solutions', author: 'Sarah Williams', company: null, likes: 19, comments: 6 }
    ]
  };

  const mockCommunities = {
    software: [
      { id: 1, name: 'Cloud Architecture Group', members: 1240, type: 'Public' },
      { id: 2, name: 'Microsoft Development Team', members: 89, type: 'Company', company: 'Microsoft' }
    ],
    manufacturing: [
      { id: 1, name: 'Industry 4.0 Innovators', members: 856, type: 'Public' },
      { id: 2, name: 'Tesla Manufacturing', members: 145, type: 'Company', company: 'Tesla' }
    ]
  };

  return (
    <div className="max-w-6xl mx-auto p-4 space-y-6">
      {/* Sector Selection */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Radio className="w-5 h-5" />
            Select Sector
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            {sectors.map(sector => (
              <button
                key={sector.id}
                onClick={() => setSelectedSector(sector.id)}
                className={`p-4 rounded-lg border transition-colors ${
                  selectedSector === sector.id
                    ? 'bg-blue-50 border-blue-500'
                    : 'hover:bg-gray-50 border-gray-200'
                }`}
              >
                {sector.name}
              </button>
            ))}
          </div>
        </CardContent>
      </Card>

      {/* Main Content Area */}
      <Tabs defaultValue="feed" className="w-full">
        <TabsList className="grid w-full grid-cols-2">
          <TabsTrigger value="feed" className="flex items-center gap-2">
            <MessageSquare className="w-4 h-4" />
            Public Feed
          </TabsTrigger>
          <TabsTrigger value="communities" className="flex items-center gap-2">
            <Users className="w-4 h-4" />
            Communities
          </TabsTrigger>
        </TabsList>

        {/* Public Feed Tab */}
        <TabsContent value="feed">
          <Card>
            <CardHeader>
              <CardTitle>Latest Discussions</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {mockPosts[selectedSector]?.map(post => (
                  <div key={post.id} className="p-4 border rounded-lg hover:bg-gray-50">
                    <h3 className="font-semibold text-lg">{post.title}</h3>
                    <div className="flex items-center gap-4 mt-2 text-sm text-gray-600">
                      <span>By: {post.author}</span>
                      {post.company && (
                        <span className="flex items-center gap-1">
                          <Building2 className="w-4 h-4" />
                          {post.company}
                        </span>
                      )}
                      <span>{post.likes} likes</span>
                      <span>{post.comments} comments</span>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        {/* Communities Tab */}
        <TabsContent value="communities">
          <Card>
            <CardHeader>
              <CardTitle>Active Communities</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid md:grid-cols-2 gap-4">
                {mockCommunities[selectedSector]?.map(community => (
                  <div key={community.id} className="p-4 border rounded-lg hover:bg-gray-50">
                    <h3 className="font-semibold text-lg">{community.name}</h3>
                    <div className="flex items-center gap-4 mt-2 text-sm text-gray-600">
                      <span>{community.members} members</span>
                      <span className={`px-2 py-1 rounded-full text-xs ${
                        community.type === 'Company' ? 'bg-blue-100 text-blue-800' : 'bg-green-100 text-green-800'
                      }`}>
                        {community.type}
                      </span>
                      {community.company && (
                        <span className="flex items-center gap-1">
                          <Building2 className="w-4 h-4" />
                          {community.company}
                        </span>
                      )}
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  );
};

export default IdeaDiscussionPlatform;