import React from 'react';
import { Link, useParams } from 'react-router-dom'; // Link ve useParams'ı import et
import { useLanguage } from '../context/LanguageContext'; // useLanguage hook'unu import et
import { blogContent, BlogPostContent } from '../locales/blogContent'; // blogContent ve BlogPostContent interface'ini import et

const BlogDetail: React.FC = () => {
  const { id } = useParams<{ id: string }>();
  const { t, language } = useLanguage(); // useLanguage hook'unu kullan ve dil bilgisini al

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

  // URL'deki slug'a göre blog yazısını bul
  // blogContent objesinden slug'a karşılık gelen blog yazısını ve mevcut dile göre içeriğini al
  const postData = blogContent[id || '']; // id undefined olabilir, boş string ile kontrol et
  const blogPost = postData ? postData[language as 'tr' | 'en'] : undefined; // Mevcut dile göre içeriği al

  if (!blogPost) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <h1 className="text-2xl font-bold text-gray-900">{t('blog.notFound')}</h1> {/* Çeviri kullan */}
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-50 pt-32 pb-16"> {/* py-16 yerine pt-32 pb-16 kullanıldı */}
      <div className="container mx-auto px-4">
        <Link to="/blog" className="text-blue-600 hover:underline mb-4 inline-block">
          &larr; {t('blog.backToBlog')} {/* Geri dönüş butonu */}
        </Link>
        {/* Blog yazısı görseli */}
        {postData.image && (
          <img
            src={postData.image} // Görsel bilgisi blogContent'ten alınıyor
            alt={t(blogPost.title)} // Alt metni çevir
            className="w-full h-96 object-cover rounded-lg mb-8"
          />
        )}
        <h1 className="text-4xl font-bold text-gray-900 mb-6">{t(blogPost.title)}</h1> {/* Çeviri kullan */}
        {/* Yazar, tarih, okuma süresi gibi bilgiler eklenebilir */}
        <div className="flex items-center text-sm text-gray-500 space-x-4 mb-8">
          <div className="flex items-center">
            {/* <User size={16} className="mr-1" /> */} {/* İkonlar eklenebilir */}
            <span>{postData.author}</span> {/* Yazar bilgisi blogContent'ten alınıyor */}
          </div>
          <div className="flex items-center">
            {/* <Calendar size={16} className="mr-1" /> */}
            {t(blogPost.date)} {/* Çeviri kullan */}
          </div>
          <div className="flex items-center">
            {/* <Clock size={16} className="mr-1" /> */}
            {blogPost.readTime}
          </div>
        </div>
        <div className="prose max-w-none text-gray-800"> {/* Tailwind Typography eklentisi kuruluysa kullanılabilir */}
          <p>{t(blogPost.content)}</p> {/* Tam içeriği çevirerek göster */}
          {/* Daha uzun içerik burada paragraflar halinde yer alabilir */}
        </div>
      </div>
    </div>
  );
};

export default BlogDetail;