import { BlogSmiley } from "./BlogSmiley";

interface BlogInlineCTAProps {
  heading?: string;
  accent?: string;
  text: string;
  cta?: string;
  href?: string;
}

export function BlogInlineCTA({
  heading = "Want results like",
  accent = "these?",
  text,
  cta = "See how it works",
  href = "https://designshare.net/#how",
}: BlogInlineCTAProps) {
  return (
    <aside className="b-inline-cta">
      <div className="b-inline-cta-bg" aria-hidden="true">
        <BlogSmiley size={170} bg="#fff" face="var(--b-blue)" />
      </div>
      <div className="b-inline-cta-inner">
        <h3>
          {heading}{" "}
          <span className="b-serif" style={{ fontWeight: 500 }}>
            {accent}
          </span>
        </h3>
        <p>{text}</p>
        <a href={href} className="b-btn" style={{ background: "#fff", color: "var(--b-blue)", boxShadow: "0 4px 0 rgba(0,0,0,.18)", display: "inline-flex", alignItems: "center", gap: 8 }}>
          {cta} <span className="b-arrow">→</span>
        </a>
      </div>
    </aside>
  );
}