import { motion } from 'framer-motion';
import { Link } from 'react-router-dom';
import { ChevronRight } from 'lucide-react';
import { ReactNode } from 'react';

export interface Crumb {
  label: string;
  to?: string;
}

export default function PageHero({
  eyebrow,
  title,
  subtitle,
  crumbs = [],
  children,
}: {
  eyebrow: string;
  title: ReactNode;
  subtitle?: string;
  crumbs?: Crumb[];
  children?: ReactNode;
}) {
  return (
    <section className="relative overflow-hidden pt-16 pb-20">
      <div className="container-wide section-padding">
        {crumbs.length > 0 && (
          <motion.nav
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            className="mb-8 flex items-center gap-1.5 text-xs text-primary-400 dark:text-gray-500"
          >
            {crumbs.map((c, i) => (
              <span key={i} className="flex items-center gap-1.5">
                {c.to ? (
                  <Link to={c.to} className="hover:text-secondary-500">{c.label}</Link>
                ) : (
                  <span className="text-primary-500 dark:text-gray-300">{c.label}</span>
                )}
                {i < crumbs.length - 1 && <ChevronRight size={13} />}
              </span>
            ))}
          </motion.nav>
        )}
        <motion.span
          initial={{ opacity: 0, y: 10 }}
          animate={{ opacity: 1, y: 0 }}
          className="inline-block rounded-full bg-secondary-500/10 px-4 py-1.5 text-xs font-semibold uppercase tracking-widest text-secondary-600 dark:text-accent-400"
        >
          {eyebrow}
        </motion.span>
        <motion.h1
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.1 }}
          className="mt-5 max-w-4xl text-4xl font-bold tracking-tight text-balance sm:text-5xl lg:text-6xl"
        >
          {title}
        </motion.h1>
        {subtitle && (
          <motion.p
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.2 }}
            className="mt-6 max-w-2xl text-lg leading-relaxed text-primary-400 dark:text-gray-400"
          >
            {subtitle}
          </motion.p>
        )}
        {children && (
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.3 }}
            className="mt-8"
          >
            {children}
          </motion.div>
        )}
      </div>
    </section>
  );
}