import Image from 'next/image'
import { Calendar, Eye, User } from 'iconsax-react'
import LastPost from '../components/LastPost'
import { NextPage } from 'next'
import Layout from '@/hoc/Layout'
import { SHOP_CONFIG } from '@/config/const'

const BlogDetail: NextPage = () => {
    return (
        <div className="max-w-7xl mx-auto px-4 py-8">
            {/* Breadcrumb */}
            <div className="text-sm text-gray-500 mb-6">
                فروشگاه {SHOP_CONFIG.name} / راهنما ها / تست اقلام و قطعات / گلکسی بوک
            </div>

            <div className="flex gap-8">
                {/* Main Content */}
                <div className="flex-1">
                    {/* Blog Header */}
                    <div className="mb-8">
                        <div className="bg-orange-100 text-orange-600 px-3 py-1 rounded text-sm inline-block mb-4">
                            اخبار
                        </div>

                        <h1 className="text-2xl font-bold text-gray-900 mb-4 leading-relaxed">
                            مشخصات گلکسی بوک 3 پرو و اولترا پیش از رونمایی فاش شد
                        </h1>

                        <div className="flex items-center gap-6 text-gray-500 text-sm">
                            <div className="flex items-center gap-2">
                                <User size={16} color="#9CA3AF" />
                                <span>نویسنده: حمید ضرغامی</span>
                            </div>
                            <div className="flex items-center gap-2">
                                <Calendar size={16} color="#9CA3AF" />
                                <span>چهارشنبه 15 آذر 1401 ساعت 15:30</span>
                            </div>
                            <div className="flex items-center gap-2">
                                <Eye size={16} color="#9CA3AF" />
                                <span>1,234 بازدید</span>
                            </div>
                        </div>
                    </div>

                    {/* Featured Image */}
                    <div className="mb-8">
                        <Image
                            src="https://images.unsplash.com/photo-1496181133206-80ce9b88a853?w=1200&h=600&fit=crop"
                            alt="Samsung Galaxy Book3 Ultra"
                            width={1200}
                            height={600}
                            className="w-full h-[400px] object-cover rounded-lg"
                        />
                    </div>

                    {/* Blog Content */}
                    <div className="prose prose-lg max-w-none text-gray-800 leading-8">
                        <p className="text-lg leading-8 mb-6">
                            گلکسی بوک 3 اولترا قوی‌ترین عضو این خانواده خواهد بود که با پردازنده نسل سیزدهم اینتل Core i9-13900H، حداکثر 32 گیگابایت رم LPDDR5 و 1 ترابایت حافظه داخلی NVMe PCIe Gen 4 از آن می‌رسد. این دستگاه همچنین می‌تواند به حداکثر گرافیک RTX 4070 اویدیا مجهز شود.
                        </p>

                        <h2 className="text-xl font-bold mt-8 mb-4">گلکسی بوک 3 پرو</h2>

                        <p className="mb-6 leading-8">
                            گلکسی بوک 3 پرو در دو اندازه 14 و 16 اینچی عرضه می‌شود که هر دو از نوع اموled با روزنمایی 3K خواهند بود. این لپ‌تاپ قرار است از پردازنده نسل سیزدهم اینتل Core i7-1360P و Core i5-1340P برخوردار شود؛ به‌همراه حداکثر 1 ترابایت حافظه DDR5 رم و 16 گیگابایت استفاده کند 16 گیگابایت رم.
                        </p>

                        <div className="bg-gray-50 p-6 rounded-lg mb-6">
                            <h3 className="font-bold text-lg mb-4">مشخصات فنی کلیدی:</h3>
                            <ul className="space-y-2">
                                <li>• پردازنده: Intel Core i9-13900H (نسل سیزدهم)</li>
                                <li>• رم: تا 32 گیگابایت LPDDR5</li>
                                <li>• حافظه: 1 ترابایت NVMe PCIe Gen 4</li>
                                <li>• کارت گرافیک: RTX 4070</li>
                                <li>• صفحه نمایش: OLED با کیفیت 3K</li>
                                <li>• سیستم عامل: Windows 11</li>
                            </ul>
                        </div>

                        <p className="mb-6 leading-8">
                            این لپ‌تاپ برای کاربران حرفه‌ای طراحی شده که نیاز به قدرت پردازشی بالا برای کارهای گرافیکی، ویرایش ویدئو و بازی دارند. طراحی زیبا و ساخت با کیفیت سامسونگ، آن را به گزینه‌ای جذاب برای کسانی تبدیل می‌کند که به دنبال ترکیب عملکرد و زیبایی هستند.
                        </p>

                        <h2 className="text-xl font-bold mt-8 mb-4">نتیجه گیری</h2>

                        <p className="mb-6 leading-8">
                            سامسونگ با ارائه گلکسی بوک 3 سری، قصد دارد جایگاه خود را در بازار لپ‌تاپ‌های پریمیوم تقویت کند. این محصولات با ترکیب سخت‌افزار قدرتمند و طراحی شیک، می‌توانند رقیبی جدی برای سایر برندهای معتبر باشند.
                        </p>
                    </div>

                    {/* Tags */}
                    <div className="mt-8 pt-6 border-t border-gray-200">
                        <div className="flex items-center gap-2 flex-wrap">
                            <span className="text-gray-600 font-medium">برچسب‌ها:</span>
                            <span className="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm">سامسونگ</span>
                            <span className="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm">گلکسی بوک</span>
                            <span className="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm">لپ‌تاپ</span>
                            <span className="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm">OLED</span>
                        </div>
                    </div>

                    {/* Share Section */}
                    <div className="mt-6 pt-6 border-t border-gray-200">
                        <div className="flex items-center justify-between">
                            <div className="flex items-center gap-4">
                                <span className="text-gray-600 font-medium">اشتراک‌گذاری:</span>
                                <button className="flex items-center gap-2 bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-colors">
                                    <span>تلگرام</span>
                                </button>
                                <button className="flex items-center gap-2 bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition-colors">
                                    <span>واتساپ</span>
                                </button>
                            </div>
                            <button className="flex items-center gap-2 text-gray-600 hover:text-red-500 transition-colors">
                                <span>♥</span>
                                <span>پسندیدن</span>
                            </button>
                        </div>
                    </div>
                </div>

                {/* Sidebar */}
                <div className="w-80 space-y-8">
                    <LastPost blogs={[]} />
                </div>
            </div>
        </div>
    )
}

export default function BlogDetailWithLayout() {
    return (
        <Layout>
            <BlogDetail />
        </Layout>
    )
}