import Link from "next/link";
import type { ReactNode } from "react";
import { IconArrow } from "./Icons";

export function SectionHeading({
  eyebrow,
  title,
  id,
  children,
  more,
  tone = "accent",
}: {
  eyebrow?: string;
  title: ReactNode;
  id?: string;
  children?: ReactNode;
  more?: { href: string; label: string };
  tone?: "accent" | "sci";
}) {
  return (
    <div className="flex flex-wrap items-end justify-between gap-x-6 gap-y-3">
      <div className="min-w-0">
        {eyebrow && <p className={`eyebrow ${tone === "sci" ? "eyebrow-sci" : ""}`}>{eyebrow}</p>}
        <h2 id={id} className="title-2 mt-1.5">
          {title}
        </h2>
        {children && <p className="muted mt-2 max-w-xl text-sm leading-relaxed">{children}</p>}
      </div>
      {more && (
        <Link href={more.href} className="btn btn-ghost btn-sm -mr-2">
          {more.label} <IconArrow size={14} />
        </Link>
      )}
    </div>
  );
}