"use client";

import Link from "next/link";
import type { LucideIcon } from "lucide-react";
import { cn } from "@/lib/utils";

export function ProfileHero({
  icon: Icon,
  title,
  subtitle,
  badges,
  actions,
  backHref,
  backLabel,
  className,
}: {
  icon: LucideIcon;
  title: string;
  subtitle?: string | null;
  badges?: React.ReactNode;
  actions?: React.ReactNode;
  backHref?: string;
  backLabel?: string;
  className?: string;
}) {
  return (
    <div
      className={cn(
        "overflow-hidden rounded-2xl border border-border bg-card shadow-[var(--shadow)]",
        className
      )}
    >
      <div className="h-24 sm:h-32" style={{ background: "var(--gradient-brand)" }} />
      <div className="relative px-4 pb-6 sm:px-8">
        <div className="-mt-10 flex flex-col gap-4 sm:-mt-12 sm:flex-row sm:items-end sm:justify-between">
          <div className="flex gap-4">
            <div className="flex h-20 w-20 shrink-0 items-center justify-center rounded-2xl border-4 border-card bg-muted shadow-lg sm:h-24 sm:w-24">
              <Icon className="h-9 w-9 text-primary sm:h-10 sm:w-10" />
            </div>
            <div className="min-w-0 pt-1 sm:pt-3">
              <h1 className="text-display text-2xl sm:text-3xl">{title}</h1>
              {subtitle ? (
                <p className="text-subtitle mt-0.5">{subtitle}</p>
              ) : null}
              {badges ? (
                <div className="mt-2 flex flex-wrap gap-2">{badges}</div>
              ) : null}
            </div>
          </div>
          {actions ? <div className="flex flex-wrap gap-2">{actions}</div> : null}
        </div>
        {backHref && backLabel ? (
          <Link
            href={backHref}
            className="mt-4 inline-block text-sm text-muted-foreground hover:text-primary"
          >
            {backLabel}
          </Link>
        ) : null}
      </div>
    </div>
  );
}