import React from 'react'
import { useNavigate } from 'react-router-dom'
import { ArrowLeft, BookOpen } from 'lucide-react'
import { useStoryStore } from '../../store/storyStore'
import { ContentModerationTable } from '../../components/admin/ContentModerationTable'

export const AdminContentPage: React.FC = () => {
  const navigate = useNavigate()
  const { stories } = useStoryStore()

  return (
    <div className="max-w-7xl mx-auto px-4 py-8">
      <div className="flex items-center gap-3 mb-8">
        <button onClick={() => navigate('/admin')} className="text-slate-400 hover:text-white transition-colors">
          <ArrowLeft size={20} />
        </button>
        <div>
          <h1 className="font-serif text-2xl font-bold text-white">Content Moderation</h1>
          <p className="text-slate-400 text-sm mt-0.5">{stories.length} total stories</p>
        </div>
      </div>

      <div className="bg-slate-900 border border-slate-700 rounded-2xl p-6">
        <div className="flex items-center gap-2 mb-6">
          <BookOpen size={18} className="text-violet-400" />
          <h2 className="text-white font-semibold">All Stories</h2>
        </div>
        <ContentModerationTable />
      </div>
    </div>
  )
}