import React, { useState } from 'react';
import { Heart, MessageCircle, Share2, Bookmark, Search, User, Home, Compass, Plus, Bell } from 'lucide-react';
import './App.css';

function App() {
  const [posts, setPosts] = useState([
    {
      id: 1,
      username: "创作者小红",
      avatar: "/api/placeholder/40/40",
      image: "/api/placeholder/300/400",
      title: "今日OOTD分享 🌸",
      content: "春日温柔穿搭，粉色系永远不会出错！",
      likes: 1234,
      comments: 89,
      isLiked: false,
      isSaved: false
    },
    {
      id: 2,
      username: "美食达人",
      avatar: "/api/placeholder/40/40",
      image: "/api/placeholder/300/400",
      title: "超简单的蛋糕制作 🍰",
      content: "零失败率的草莓蛋糕，新手也能做出完美作品！",
      likes: 2567,
      comments: 156,
      isLiked: false,
      isSaved: false
    },
    {
      id: 3,
      username: "旅行摄影师",
      avatar: "/api/placeholder/40/40",
      image: "/api/placeholder/300/400",
      title: "云南大理古城 📸",
      content: "漫步在石板路上，感受千年古城的魅力",
      likes: 3421,
      comments: 234,
      isLiked: true,
      isSaved: false
    }
  ]);

  const [activeTab, setActiveTab] = useState('home');

  const handleLike = (postId) => {
    setPosts(posts.map(post => 
      post.id === postId 
        ? { ...post, isLiked: !post.isLiked, likes: post.isLiked ? post.likes - 1 : post.likes + 1 }
        : post
    ));
  };

  const handleSave = (postId) => {
    setPosts(posts.map(post => 
      post.id === postId 
        ? { ...post, isSaved: !post.isSaved }
        : post
    ));
  };

  return (
    <div className="app">
      {/* Header */}
      <header className="header">
        <div className="header-content">
          <h1 className="logo">小红书</h1>
          <div className="search-bar">
            <Search size={20} />
            <input type="text" placeholder="搜索你感兴趣的内容" />
          </div>
          <div className="header-actions">
            <Bell size={24} />
            <User size={24} />
          </div>
        </div>
      </header>

      {/* Main Content */}
      <main className="main-content">
        <div className="posts-container">
          {posts.map(post => (
            <div key={post.id} className="post-card">
              <div className="post-image">
                <img src={post.image} alt={post.title} />
              </div>
              <div className="post-content">
                <h3 className="post-title">{post.title}</h3>
                <p className="post-description">{post.content}</p>
                <div className="post-author">
                  <img src={post.avatar} alt={post.username} className="author-avatar" />
                  <span className="author-name">{post.username}</span>
                </div>
                <div className="post-actions">
                  <button 
                    className={`action-btn ${post.isLiked ? 'liked' : ''}`}
                    onClick={() => handleLike(post.id)}
                  >
                    <Heart size={16} fill={post.isLiked ? '#ff4757' : 'none'} />
                    <span>{post.likes}</span>
                  </button>
                  <button className="action-btn">
                    <MessageCircle size={16} />
                    <span>{post.comments}</span>
                  </button>
                  <button className="action-btn">
                    <Share2 size={16} />
                  </button>
                  <button 
                    className={`action-btn ${post.isSaved ? 'saved' : ''}`}
                    onClick={() => handleSave(post.id)}
                  >
                    <Bookmark size={16} fill={post.isSaved ? '#ffa502' : 'none'} />
                  </button>
                </div>
              </div>
            </div>
          ))}
        </div>
      </main>

      {/* Bottom Navigation */}
      <nav className="bottom-nav">
        <button 
          className={`nav-btn ${activeTab === 'home' ? 'active' : ''}`}
          onClick={() => setActiveTab('home')}
        >
          <Home size={24} />
          <span>首页</span>
        </button>
        <button 
          className={`nav-btn ${activeTab === 'discover' ? 'active' : ''}`}
          onClick={() => setActiveTab('discover')}
        >
          <Compass size={24} />
          <span>发现</span>
        </button>
        <button 
          className={`nav-btn ${activeTab === 'create' ? 'active' : ''}`}
          onClick={() => setActiveTab('create')}
        >
          <Plus size={24} />
          <span>创作</span>
        </button>
        <button 
          className={`nav-btn ${activeTab === 'profile' ? 'active' : ''}`}
          onClick={() => setActiveTab('profile')}
        >
          <User size={24} />
          <span>我</span>
        </button>
      </nav>
    </div>
  );
}

export default App;