import type { ArticleFilters } from '@/components/ArticleFilters'
import { ArticleFiltersComponent } from '@/components/ArticleFilters'
import { SearchBar } from '@/components/SearchBar'
import type { Article } from '@/types/nostr'

interface ProfileArticlesHeaderProps {
  searchQuery: string
  setSearchQuery: (value: string) => void
  filters: ArticleFilters
  setFilters: (value: ArticleFilters) => void
  allArticles: Article[]
  articleFiltersVisible: boolean
}

export function ProfileArticlesHeader({
  searchQuery,
  setSearchQuery,
  filters,
  setFilters,
  allArticles,
  articleFiltersVisible,
}: ProfileArticlesHeaderProps) {
  return (
    <div className="mb-6">
      <h2 className="text-2xl font-bold mb-4">My Articles</h2>
      <div className="mb-4">
        <SearchBar value={searchQuery} onChange={setSearchQuery} placeholder="Search my articles..." />
      </div>
      {articleFiltersVisible && (
        <ArticleFiltersComponent filters={filters} onFiltersChange={setFilters} articles={allArticles} />
      )}
    </div>
  )
}