import React from 'react';
import type { ReactNode } from 'react';
import { motion } from 'framer-motion';
import { theme } from '../theme';

export interface TaskTab {
  id: string;
  label: string;
  badge?: ReactNode;
}

interface TaskHeaderProps {
  title: string;
  subtitle?: string;
  tabs: TaskTab[];
  activeTab: string;
  onTabChange: (tabId: string) => void;
}

/**
 * Header for the Tasks screen: renders hero copy plus animated pill tabs.
 */
const TaskHeader: React.FC<TaskHeaderProps> = ({ title, subtitle, tabs, activeTab, onTabChange }) => {
  return (
    <div className="flex flex-col gap-6">
      <div className="flex flex-col gap-3">
        <h1
          className="font-playfair text-3xl font-semibold text-cream"
          style={{ letterSpacing: '0.6px' }}
        >
          {title}
        </h1>
        {subtitle && (
          <p className="max-w-2xl text-base text-cream/70" style={theme.typography.body}>
            {subtitle}
          </p>
        )}
      </div>

      <div className="flex flex-wrap items-center gap-3">
        {tabs.map((tab) => {
          const isActive = tab.id === activeTab;
          return (
            <button
              key={tab.id}
              type="button"
              onClick={() => onTabChange(tab.id)}
              className={`relative flex items-center gap-2 rounded-full border px-5 py-2 text-xs font-semibold uppercase tracking-[0.14em] transition-all duration-200 ${
                isActive
                  ? 'border-luxury-gold/70 bg-[#1A4036]/80 text-luxury-gold shadow-[0_10px_24px_rgba(203,169,81,0.35)]'
                  : 'border-transparent bg-transparent text-cream/60 hover:border-luxury-gold/30 hover:bg-[#1A4036]/30 hover:text-cream'
              }`}
            >
              {isActive && (
                <motion.span
                  layoutId="task-tab-glow"
                  className="absolute inset-0 rounded-full bg-luxury-gold/10"
                  transition={{ type: 'spring', stiffness: 260, damping: 24 }}
                />
              )}
              <span className="relative z-10">{tab.label}</span>
              {tab.badge && <span className="relative z-10">{tab.badge}</span>}
            </button>
          );
        })}
      </div>
    </div>
  );
};

export default TaskHeader;