instrucoes_gerais/clube67/newwhats.local/frontend/components/ui/PageHeader.tsx

import React from 'react';
import { motion } from 'framer-motion';
import { LucideIcon } from 'lucide-react';

interface PageHeaderProps {
  icon: LucideIcon;
  title: string;
  titleAccent?: string;
  subtitle?: string;
  actions?: React.ReactNode;
  className?: string;
}

export default function PageHeader({ icon: Icon, title, titleAccent, subtitle, actions, className = '' }: PageHeaderProps) {
  return (
    <motion.header
      initial={{ opacity: 0, y: 10 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.4 }}
      className={`flex flex-col md:flex-row md:items-center justify-between gap-6 mb-10 ${className}`}
    >
      <div>
        <h1 className="text-3xl font-black text-white tracking-tight flex items-center gap-3">
          <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-brand-500 to-brand-700 flex items-center justify-center shadow-glow-brand">
            <Icon className="text-white w-6 h-6" />
          </div>
          {title}
          {titleAccent && <span className="text-brand-400">{titleAccent}</span>}
        </h1>
        {subtitle && (
          <p className="text-slate-500 text-sm mt-1 uppercase tracking-widest font-bold ml-[60px]">{subtitle}</p>
        )}
      </div>
      {actions && <div className="flex items-center gap-3">{actions}</div>}
    </motion.header>
  );
}