'use client';

import { useState } from 'react';

type TabType = 'latest' | 'popular';

interface BlogPageHeaderProps {
  title?: string;
  onTabChange?: (tab: TabType) => void;
}

export const BlogPageHeader = ({
  title = 'Latest Articles',
  onTabChange,
}: BlogPageHeaderProps) => {
  const [activeTab, setActiveTab] = useState<TabType>('latest');

  const handleTabClick = (tab: TabType) => {
    setActiveTab(tab);
    onTabChange?.(tab);
  };

  return (
    <div className="flex items-center justify-between mb-8 pb-6 border-b border-white/5">
      <h1 className="text-3xl font-bold text-white tracking-tight">{title}</h1>
      <div className="flex items-center gap-2 text-sm text-gray-400 bg-white/5 p-1 rounded-lg border border-white/5">
        <button
          onClick={() => handleTabClick('latest')}
          className={`px-3 py-1.5 rounded-md text-xs font-medium transition-all ${
            activeTab === 'latest'
              ? 'bg-[#111827] text-white shadow-sm'
              : 'hover:text-white'
          }`}
        >
          Latest
        </button>
        <button
          onClick={() => handleTabClick('popular')}
          className={`px-3 py-1.5 rounded-md text-xs font-medium transition-all ${
            activeTab === 'popular'
              ? 'bg-[#111827] text-white shadow-sm'
              : 'hover:text-white'
          }`}
        >
          Popular
        </button>
      </div>
    </div>
  );
};
