"use client";

import { ReactNode } from "react";

export function TeacherHeroHeader({
  title,
  subtitle,
  actions,
  badge,
  leading,
}: {
  title: string;
  subtitle?: string;
  actions?: ReactNode;
  badge?: ReactNode;
  leading?: ReactNode;
}) {
  return (
    <div
      className="relative overflow-hidden rounded-2xl p-5 text-white shadow-md lg:p-6 sticky top-14 z-20 lg:top-[3.25rem]"
      style={{ background: "var(--header-gradient)" }}
    >
      <div
        className="pointer-events-none absolute -left-10 -top-10 h-40 w-40 rounded-full opacity-20"
        style={{ background: "radial-gradient(circle, #fff 0%, transparent 70%)" }}
        aria-hidden
      />
      <div className="relative flex flex-wrap items-center justify-between gap-3">
        <div className="flex min-w-0 items-center gap-3">
          {leading}
          <div className="min-w-0">
            <div className="flex flex-wrap items-center gap-2">
              <h2 className="text-2xl font-bold tracking-tight lg:text-3xl">{title}</h2>
              {badge}
            </div>
            {subtitle ? <p className="mt-1.5 text-sm text-white/90 lg:text-base">{subtitle}</p> : null}
          </div>
        </div>
        {actions ? <div className="flex flex-wrap items-center gap-2">{actions}</div> : null}
      </div>
    </div>
  );
}