Untitled

import React, { useState } from 'react';
import { Book, Headphones, Video, FileText, ThumbsUp, ThumbsDown, Share2, Download } from 'lucide-react';
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Badge } from "@/components/ui/badge"

const contentRecommendations = [
  {
    title: "The Science of Endurance Sports",
    creator: "SportsScience Journal",
    description: "Latest research on improving athletic performance.",
    category: "Sports/Medical",
    type: "article"
  },
  {
    title: "The Future of Telemedicine",
    creator: "Dr. Emily Chen",
    description: "How technology is revolutionizing healthcare delivery.",
    category: "Medical/Tech",
    type: "podcast"
  },
  {
    title: "The Jungle",
    creator: "Upton Sinclair",
    description: "Classic novel exposing the harsh conditions in the US meat industry.",
    category: "Food/Politics",
    type: "ebook"
  },
  {
    title: "Understanding Global Trade Policies",
    creator: "World Trade Organization",
    description: "Comprehensive guide to international trade agreements.",
    category: "Politics",
    type: "pdf"
  },
  {
    title: "Introduction to Machine Learning",
    creator: "TechEd Platform",
    description: "Beginner-friendly course on AI and machine learning basics.",
    category: "Tech",
    type: "video"
  }
];

const getIconForType = (type) => {
  switch (type) {
    case 'article': return <FileText className="h-4 w-4" />;
    case 'podcast': return <Headphones className="h-4 w-4" />;
    case 'ebook': return <Book className="h-4 w-4" />;
    case 'pdf': return <FileText className="h-4 w-4" />;
    case 'video': return <Video className="h-4 w-4" />;
    default: return <FileText className="h-4 w-4" />;
  }
};

const RecommendationCard = ({ content }) => (
  <Card className="w-full mb-4">
    <CardHeader>
      <div className="flex justify-between items-start">
        <div>
          <CardTitle className="text-lg">{content.title}</CardTitle>
          <CardDescription>{content.creator}</CardDescription>
        </div>
        <Badge variant="secondary">{content.type}</Badge>
      </div>
    </CardHeader>
    <CardContent>
      <p>{content.description}</p>
      <div className="flex items-center mt-2">
        <Badge variant="outline" className="mr-2">{content.category}</Badge>
        {getIconForType(content.type)}
      </div>
    </CardContent>
    <CardFooter className="flex justify-between">
      <Button variant="outline" size="icon">
        <ThumbsUp className="h-4 w-4" />
      </Button>
      <Button variant="outline" size="icon">
        <ThumbsDown className="h-4 w-4" />
      </Button>
      <Button variant="outline" size="icon">
        <Share2 className="h-4 w-4" />
      </Button>
      <Button variant="outline" size="icon">
        <Download className="h-4 w-4" />
      </Button>
    </CardFooter>
  </Card>
);

const LiteraLensApp = () => {
  const [activeTab, setActiveTab] = useState('recommendations');

  return (
    <div className="max-w-md mx-auto bg-gray-100 p-4 h-[600px] flex flex-col">
      <header className="text-center mb-4">
        <h1 className="text-2xl font-bold">LiteraLens</h1>
        <p className="text-sm text-gray-500">Your free multi-format reading companion</p>
      </header>
      
      <nav className="flex mb-4">
        <Button 
          variant={activeTab === 'recommendations' ? 'default' : 'outline'}
          onClick={() => setActiveTab('recommendations')}
          className="flex-1 mr-2"
        >
          Recommendations
        </Button>
        <Button 
          variant={activeTab === 'myLibrary' ? 'default' : 'outline'}
          onClick={() => setActiveTab('myLibrary')}
          className="flex-1"
        >
          My Library
        </Button>
      </nav>
      
      <main className="flex-grow overflow-hidden">
        {activeTab === 'recommendations' && (
          <ScrollArea className="h-full">
            <h2 className="text-xl font-semibold mb-4">This Week's Free Picks</h2>
            {contentRecommendations.map((content, index) => (
              <RecommendationCard key={index} content={content} />
            ))}
          </ScrollArea>
        )}
        {activeTab === 'myLibrary' && (
          <div className="text-center mt-20">
            <Book size={48} className="mx-auto mb-4 text-gray-400" />
            <p>Your library is empty.</p>
            <p className="text-sm text-gray-500">Downloaded content will appear here.</p>
          </div>
        )}
      </main>
    </div>
  );
};

export default LiteraLensApp;