"use client";

import Link from "next/link";

export type Crumb = { label: string; href?: string };

type Props = {
  title: string;
  crumbs: Crumb[];
  note?: string;
  underlineWidthClass?: string;
  className?: string;
  wrapClassName?: string;
  hideFooterLine?: boolean;
  hideGuideText?: boolean;
};

export default function SubPageHeader({
  title,
  crumbs,
  note = "* 는 필수 값입니다.",
  // underlineWidthClass = "w-40",
  className = "",
  wrapClassName = "",
  // hideFooterLine = false,
  hideGuideText = false,
}: Props) {
  return (
    <section className={`text-black ${className}`}>
      <div className={`pb-5 ${wrapClassName}`}>
        <div className="flex items-start justify-between gap-6">
          {/* 좌측 타이틀 */}
          <div className="inline-block">
            <h1 className="relative z-10 px-2 text-[28px] font-extrabold tracking-tight text-slate-900 leading-none">{title}</h1>
            <div className="relative top-[-7px] -z-1 h-4 bg-gradient-to-r from-sky-300 to-green-300" />
          </div>

          {/* 우측 브레드크럼 */}
          <nav className="pt-2 text-sm text-black/70" aria-label="breadcrumb">
            {crumbs.map((c, i) => (
              <span key={`${c.label}-${i}`}>
                {c.href ? (
                  <Link href={c.href} className="hover:text-sky-500">
                    {c.label}
                  </Link>
                ) : (
                  <span className="text-black/90">{c.label}</span>
                )}
                {i < crumbs.length - 1 && <span className="mx-2">›</span>}
              </span>
            ))}
          </nav>
        </div>
        {/* 하단 라인 + 안내문 */}
        {!hideGuideText && (
          <div className="mt-6 border-t border-black/10 pt-4 text-sm text-black/70">
            <span className="text-red-400">*</span>
            {note.replace("*", "")}
          </div>
        )}  
      </div>
    </section>
  );
}