import React from 'react';

const PublicationHeader = () => {
    return (
        <section id="repo-header">
            <div className="max-w-[1440px] mx-auto px-6 lg:px-8">

                {/* Title row + action buttons */}
                <div className="flex flex-col lg:flex-row justify-between items-start lg:items-end gap-6 mb-8 w-full">
                    <div className="flex-1 max-w-3xl">
                        <h1>Publication Repository</h1>
                        <p>Search, filter, and access over 15,000 academic publications and research papers.</p>
                    </div>
                    <div className="flex gap-3 shrink-0">
                        <button className="pub-btn-outline">
                            <i className="fa-regular fa-bookmark"></i>
                            Saved Searches
                        </button>
                        <button className="pub-btn-primary">
                            <i className="fa-solid fa-download"></i>
                            Export Results
                        </button>
                    </div>
                </div>

                {/* Search bar */}
                <div className="pub-search-bar">
                    <span className="pub-search-icon">
                        <i className="fa-solid fa-magnifying-glass"></i>
                    </span>
                    <input
                        type="text"
                        placeholder="Search by title, author, keyword, or DOI..."
                    />
                    <div className="pub-search-btn-wrap">
                        <button className="pub-btn-primary">Search</button>
                    </div>
                </div>

            </div>
        </section>
    );
};

export default PublicationHeader;