import { Link } from 'react-router-dom';
import { ChevronRight, Home } from 'lucide-react';
import Header from '../components/Header';
import Footer from '../components/Footer';
import { Helmet } from 'react-helmet';
import { useStore } from '../hooks/useStore';

/**
 * Trang tĩnh dùng chung cho các trang nội dung footer
 * Props:
 *  - title: Tiêu đề trang
 *  - icon: Icon component (lucide-react)
 *  - iconColor: màu của icon (tailwind class)
 *  - children: nội dung
 */
const StaticPage = ({ title, icon: Icon, iconColor = 'text-orange-500', children }) => {
    const { dataWebsite } = useStore();

    return (
        <div className="min-h-screen bg-[#0f172a] flex flex-col">
            <Helmet>
                <title>{title} | {dataWebsite?.nameWebsite || 'Shop Nick'}</title>
                <meta name="description" content={`${title} - ${dataWebsite?.nameWebsite}`} />
            </Helmet>

            <header className="pb-16">
                <Header />
            </header>

            <main className="flex-1 py-10 px-4">
                <div className="max-w-4xl mx-auto">
                    {/* Breadcrumb */}
                    <nav className="flex items-center gap-2 text-sm text-gray-400 mb-8">
                        <Link to="/" className="flex items-center gap-1 hover:text-orange-400 transition-colors">
                            <Home size={14} />
                            <span>Trang chủ</span>
                        </Link>
                        <ChevronRight size={14} className="text-gray-600" />
                        <span className="text-orange-400">{title}</span>
                    </nav>

                    {/* Header Card */}
                    <div className="bg-gradient-to-r from-orange-600/20 to-red-600/20 border border-orange-500/30 rounded-2xl p-8 mb-8 backdrop-blur-sm">
                        <div className="flex items-center gap-4">
                            {Icon && (
                                <div className="w-14 h-14 rounded-2xl bg-orange-500/20 flex items-center justify-center">
                                    <Icon size={28} className={iconColor} />
                                </div>
                            )}
                            <div>
                                <h1 className="text-2xl md:text-3xl font-bold text-white">{title}</h1>
                                <p className="text-gray-400 text-sm mt-1">Cập nhật lần cuối: {new Date().toLocaleDateString('vi-VN')}</p>
                            </div>
                        </div>
                    </div>

                    {/* Content */}
                    <div className="bg-[#1e293b] border border-gray-700/50 rounded-2xl p-8 text-gray-300 space-y-6 leading-relaxed">
                        {children}
                    </div>
                </div>
            </main>

            <footer>
                <Footer />
            </footer>
        </div>
    );
};

export default StaticPage;
