import React from 'react';
import { Calendar, Clock, User } from 'lucide-react';
import { useLanguage } from '../context/LanguageContext';
import { Link } from 'react-router-dom';
import { blogPostsList, BlogPostContent } from '../locales/blogContent'; // blogPostsList ve BlogPostContent interface'ini import et

const Blog: React.FC = () => {
  const { t } = useLanguage();

  // Basit slug oluşturma fonksiyonu
  const createSlug = (title: string) => {
    return title
      .toLowerCase()
      .replace(/ /g, '-')
      .replace(/[^\w-]+/g, '');
  };

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Hero Section */}
      <div className="relative bg-blue-900 text-white py-24">
        <div className="absolute inset-0 opacity-20" style={{
          backgroundImage: 'url("https://images.pexels.com/photos/3183160/pexels-photo-3183160.jpeg?auto=compress&cs=tinysrgb&w=1920")',
          backgroundSize: 'cover',
          backgroundPosition: 'center',
        }}></div>
        <div className="container mx-auto pt-16 px-4 relative">
          <h1 className="text-5xl font-bold mb-6">{t('blog.title')}</h1>
          <p className="text-xl max-w-3xl">
            {t('blog.subtitle')}
          </p>
        </div>
      </div>

      {/* Blog Posts Grid */}
      <div className="container mx-auto px-4 py-16">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {blogPostsList.map((post, index) => (
            <Link to={`/blog/${post.slug}`} key={index} className="block">
              <article className="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
                <div className="aspect-w-16 aspect-h-9 relative">
                  <img
                    src={post.image} // Görsel bilgisi doğrudan post objesinden alınıyor
                    alt={t(post.title)}
                    className="object-cover w-full h-48"
                  />
                  <div className="absolute top-4 right-4 bg-blue-600 text-white px-3 py-1 rounded-full text-sm">
                    {t(post.category)}
                  </div>
                </div>
                <div className="p-6">
                  <h2 className="text-xl font-bold text-gray-900 mb-3 hover:text-blue-600 transition-colors">
                    {t(post.title)}
                  </h2>
                  <p className="text-gray-600 mb-4">
                    {t(post.excerpt)}
                  </p>
                  <div className="flex items-center text-sm text-gray-500 space-x-4">
                      <div className="flex items-center">
                        <User size={16} className="mr-1" />
                        {post.author} {/* Yazar bilgisi doğrudan post objesinden alınıyor */}
                      </div>
                      <div className="flex items-center">
                        <Calendar size={16} className="mr-1" />
                        {t(post.date)}
                      </div>
                      <div className="flex items-center">
                        <Clock size={16} className="mr-1" />
                        {post.readTime}
                      </div>
                    </div>
                  </div>
                </article>
              </Link>
            ))}
        </div>
      </div>

      {/* Newsletter Section */}
      <div className="bg-white py-16">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-3xl font-bold text-gray-900 mb-4">{t('blog.subscribe')}</h2>
          <p className="text-gray-600 mb-8 max-w-2xl mx-auto">
            {t('blog.subscribe.desc')}
          </p>
          <div className="max-w-md mx-auto flex gap-4">
            <input
              type="email"
              placeholder={t('common.email')}
              className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
            <button className="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors">
              {t('common.subscribe')}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Blog;