import Link from "next/link";
import { ReactNode } from "react";

export function SectionHeading({
  eyebrow,
  title,
  desc,
  cta,
  align = "left",
}: {
  eyebrow: string;
  title: ReactNode;
  desc?: ReactNode;
  cta?: { label: string; href: string };
  align?: "left" | "center" | "split";
}) {
  if (align === "center") {
    return (
      <div className="section-head--center">
        <span className="eyebrow">{eyebrow}</span>
        <h2 className="display-title ts-34-44 section-head__title">{title}</h2>
        {desc && <p className="section-head__desc section-head__desc--center">{desc}</p>}
      </div>
    );
  }
  if (align === "split") {
    return (
      <div className="section-head--split">
        <div className="section-head__col">
          <span className="eyebrow">{eyebrow}</span>
          <h2 className="display-title ts-32-40 section-head__title">{title}</h2>
        </div>
        <div className="section-head__aside">
          {desc && <p className="section-head__desc">{desc}</p>}
          {cta && (
            <Link href={cta.href} className="link-arrow">
              {cta.label}
            </Link>
          )}
        </div>
      </div>
    );
  }
  return (
    <div>
      <span className="eyebrow">{eyebrow}</span>
      <h2 className="display-title ts-32-40 section-head__title">{title}</h2>
      {desc && <p className="section-head__desc section-head__desc--left">{desc}</p>}
    </div>
  );
}

export function Stars({ n = 3, total = 5 }: { n?: number; total?: number }) {
  return (
    <div className="stars">
      {Array.from({ length: total }).map((_, i) => (
        <svg key={i} width="16" height="16" viewBox="0 0 24 24" fill={i < n ? "#FFC107" : "#E3E3E3"}>
          <path d="M12 2l2.9 6.3 6.9.7-5.1 4.6 1.4 6.8L12 17.6 5.9 20.4l1.4-6.8L2.2 9l6.9-.7L12 2z" />
        </svg>
      ))}
    </div>
  );
}

export function Arrow({ className = "" }: { className?: string }) {
  return (
    <svg className={className} width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
      <path d="M5 12h14M13 6l6 6-6 6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}