import Link from 'next/link'
import { 
  BookOpenIcon, 
  ClockIcon, 
  UserIcon,
  TagIcon,
  ArrowRightIcon,
  SparklesIcon,
  FireIcon
} from '@heroicons/react/24/outline'
import { blogPosts } from './blogPosts'

const categories = ['All', ...Array.from(new Set(blogPosts.map(post => post.category)))]

export default function BlogPage() {
  return (
    <>
      {/* Header Section */}
      <div className="flex items-center space-x-3 mb-6">
        <div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-teal-500 to-cyan-500 flex items-center justify-center">
          <BookOpenIcon className="w-6 h-6 text-white" />
        </div>
        <div>
          <h1 className="text-3xl font-medium text-white">Blog</h1>
          <p className="text-lg text-slate-300 mt-1">Insights about writing, AI, and the future of book creation.</p>
        </div>
      </div>

      {/* Category Tags */}
      <div className="flex space-x-2 mb-12 overflow-x-auto pb-4 scrollbar-hide">
        {categories.map((category) => (
          <button
            key={category}
            className={`px-4 py-2 text-sm font-medium rounded-xl transition-all duration-200 whitespace-nowrap ${
              category === 'All'
                ? 'bg-gradient-to-r from-teal-500 to-cyan-500 text-white shadow-lg'
                : 'bg-white/5 text-gray-400 hover:bg-white/10 hover:text-white border border-white/10'
            }`}
          >
            {category}
          </button>
        ))}
      </div>

      {/* Featured Post */}
      {blogPosts.find(post => post.featured) && (
        <div className="mb-16">
          <div className="flex items-center space-x-2 mb-6">
            <FireIcon className="w-5 h-5 text-orange-400" />
            <h2 className="text-xl font-medium text-white">Featured Post</h2>
          </div>
          <div className="bg-gradient-to-br from-slate-800/50 to-slate-900/50 border border-white/10 rounded-2xl p-8 hover:border-teal-500/30 transition-all duration-300">
            <Link href={`/blog/${blogPosts[0].slug}`} className="group block">
              <div className="flex items-center space-x-2 text-sm text-slate-400 mb-4">
                <span className="flex items-center space-x-1">
                  <TagIcon className="w-4 h-4" />
                  <span>{blogPosts[0].category}</span>
                </span>
                <span>·</span>
                <span className="flex items-center space-x-1">
                  <ClockIcon className="w-4 h-4" />
                  <span>{blogPosts[0].date}</span>
                </span>
                <span>·</span>
                <span className="flex items-center space-x-1">
                  <UserIcon className="w-4 h-4" />
                  <span>{blogPosts[0].author}</span>
                </span>
                <span>·</span>
                <span>{blogPosts[0].readTime}</span>
              </div>
              <h2 className="text-3xl font-medium mb-4 group-hover:text-teal-400 transition-colors text-white">
                {blogPosts[0].title}
              </h2>
              <p className="text-lg text-slate-300 mb-6">{blogPosts[0].description}</p>
              <div className="flex items-center text-teal-400 group-hover:text-teal-300 transition-colors">
                <span className="text-sm font-medium">Read more</span>
                <ArrowRightIcon className="w-4 h-4 ml-1 group-hover:translate-x-1 transition-transform" />
              </div>
            </Link>
          </div>
        </div>
      )}

      {/* Regular Posts */}
      <div className="space-y-12">
        {blogPosts.filter(post => !post.featured).map((post, index) => (
          <div key={post.slug}>
            <Link href={`/blog/${post.slug}`} className="group block">
              <div className="flex items-center space-x-2 text-sm text-slate-400 mb-3">
                <span className="flex items-center space-x-1">
                  <TagIcon className="w-4 h-4" />
                  <span>{post.category}</span>
                </span>
                <span>·</span>
                <span className="flex items-center space-x-1">
                  <ClockIcon className="w-4 h-4" />
                  <span>{post.date}</span>
                </span>
                <span>·</span>
                <span className="flex items-center space-x-1">
                  <UserIcon className="w-4 h-4" />
                  <span>{post.author}</span>
                </span>
                <span>·</span>
                <span>{post.readTime}</span>
              </div>
              <h2 className="text-2xl font-medium mb-3 group-hover:text-teal-400 transition-colors text-white">{post.title}</h2>
              <p className="text-slate-300 mb-4">{post.description}</p>
              <div className="flex items-center text-teal-400 group-hover:text-teal-300 transition-colors">
                <span className="text-sm font-medium">Read more</span>
                <ArrowRightIcon className="w-4 h-4 ml-1 group-hover:translate-x-1 transition-transform" />
              </div>
            </Link>
            {index < blogPosts.filter(post => !post.featured).length - 1 && (
              <div className="h-px bg-gradient-to-r from-transparent via-slate-700 to-transparent my-12" />
            )}
          </div>
        ))}
      </div>
    </>
  )
}