'use client'
// src/components/shell/PageHeader.tsx
// Input: title, description?, actions? (ReactNode slot)
// Output: animated page header with staggered fade-in slide-up
// Rationale: consistent page title block across all screens

import { motion } from 'framer-motion'

interface PageHeaderProps {
  title: string
  description?: string
  actions?: React.ReactNode
}

const item = {
  hidden: { opacity: 0, y: 12 },
  show: { opacity: 1, y: 0 },
}

export function PageHeader({ title, description, actions }: PageHeaderProps) {
  return (
    <motion.div
      initial="hidden"
      animate="show"
      variants={{ show: { transition: { staggerChildren: 0.06 } } }}
      className="flex items-start justify-between gap-4 mb-6"
    >
      <div className="flex flex-col gap-1">
        <motion.h1
          variants={item}
          transition={{ duration: 0.4, ease: [0.16, 1, 0.3, 1] }}
          className="text-h1 text-text-primary"
        >
          {title}
        </motion.h1>
        {description && (
          <motion.p
            variants={item}
            transition={{ duration: 0.4, ease: [0.16, 1, 0.3, 1] }}
            className="text-body text-text-secondary"
          >
            {description}
          </motion.p>
        )}
      </div>
      {actions && (
        <motion.div
          variants={item}
          transition={{ duration: 0.4, ease: [0.16, 1, 0.3, 1] }}
          className="flex items-center gap-2 flex-shrink-0"
        >
          {actions}
        </motion.div>
      )}
    </motion.div>
  )
}